smooth swiping between tabs in angular

Question

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?

Answer 1

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>