Angular Material TabGroup Gesture

This library provide a simple directive to enable gesture behaviors for the MatTabGroup component on top of @angular/material library.

####Gesture features :

• Scroll tab header with your finger IF there are too much tabs to show it all on your screen
• Swipe between tabs by swiping the tab content from left to right (or right to left)

Demo

Live demo on Stackblitz

Getting started

Install the library from npm

npm i --save @angular-material-gesture/mat-tab-group-gesture

Next, import the MatTabGroupGestureModule in your app's module

app.module.ts

import { MatTabGroupGestureModule } from 'mat-tab-group-gesture';
...
@NgModule({
  ...
  imports: [
    ...
    MatTabGroupGestureModule,
  ],
  ...
})
export class AppModule { }

After that, you will be able to add gesture directive to mat-tab-group :

<mat-tab-group matTabGroupGesture [swipeLimitWidth]="80" [connectEdges]="true">
    ...
</mat-tab-group>

API Documentation

MatTabGroupGesture

Directive responsible for managing gesture behaviors

Selector: matTabGroupGesture

Properties

| Name | Default value | Description | ----- | ------- | ----------- | swipeLimitWidth | 80 | The minimum length of the "swipe" gesture to trigger the tabs navigation | connectEdges | true | If true, the first tab and the last tab are connected (swiping for next tab on last tab will swipe to the first tab & vice-versa)