4

How can I implement smooth swiping between tabs in angular?

I am using mat-tabs (angular material tabs) and want to add tab-swiping support for touch devices (like WhatsApp or Telegram for mobile).

resources I found provide the tabs parent element (mat-tab-group) with a selectedIndex input and update it based on the swipeleft and swiperight events.

My problem with this solution is that the transition is instant and not smooth, and even if I add some custom animation, the swipe can't be canceled after it's started (in the apps I mentioned above it can.)

So is there a way to achieve this with mat-tabs or is there a different component library I can use for this?

NeNaD
  • 18,172
  • 8
  • 47
  • 89
Joshua
  • 109
  • 2
  • 6
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Apr 10 '22 at 20:06
  • did you figured it out? I have exact same problem. Animation in mat-tab-group exists from the box. However, in mat-tab-nav-bar it completely absent. I need smooth animation. – Jean Seven May 25 '23 at 10:10

1 Answers1

0

You can add animationDuration directive to mat-tab-group and it will animate the transition between tabs:

<mat-tab-group animationDuration="1000ms">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>
NeNaD
  • 18,172
  • 8
  • 47
  • 89
  • 1
    Thanks for your answer, i assume you didn't understand the question correctly, i am talking about swiping the tab-body itself, not clicking the tab headers – Joshua Apr 10 '22 at 18:33