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?
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>