@angular-material-gesture/mat-tab-group-gesture v1.4.0

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