aquí hay una manera simple de hacerlo:

plunker de trabajo: https://plnkr.co/edit/uJ3n8XedvCCdeUHXKpwX?p=preview

primero, agregue hammerjs a su módulo:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

proporcionarlo en providers

 providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig }]

módulo de muestra:

 @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MaterialModule, ], declarations: [TabsOverviewExample], bootstrap: [TabsOverviewExample], providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig }] }) export class PlunkerAppModule {}

luego construye tu componente de esta manera:

 import {Component, AfterViewInit, ViewChild, ViewChildren} from '@angular/core'; import { MdTabGroup, MdTab } from '@angular/material'; @Component({ selector: 'tabs-overview-example', template:` <md-tab-group [selectedIndex]="selected" (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)"> <md-tab label="Tab 1"><div class="content">Content 1</div></md-tab> <md-tab label="Tab 2"><div class="content">Content 2</div></md-tab> <md-tab label="Tab 3"><div class="content">Content 3</div></md-tab> <md-tab label="Tab 4"><div class="content">Content 4</div></md-tab> <md-tab label="Tab 5"><div class="content">Content 5</div></md-tab> </md-tab-group>`, styles:['.content{ height: 500px; background-color: yellow;}'] }) export class TabsOverviewExample implements AfterViewInit{ @ViewChild(MdTabGroup) group; @ViewChildren(MdTab) tabs; tab_num = 0; selected = 0; SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' }; number_tabs ngAfterViewInit(){ this.tab_num = this.tabs.length console.log(this.group) } swipe(eType){ console.log(eType); if(eType === this.SWIPE_ACTION.LEFT && this.selected > 0){ console.log("movin left") this.selected--; } else if(eType === this.SWIPE_ACTION.RIGHT && this.selected < this.tab_num){ console.log("movin right") this.selected++; } console.log(this.selected) } }

esto funcionó para mí

https://plnkr.co/edit/VC270mPwh2o8CbMt9u7k?p=preview

Modelo

 <div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)"> <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()"> <md-tab label="Tab 1" (swipeleft)="swipe(1, $event.type)" (swiperight)="swipe(1, $event.type)"> Content 1 </md-tab> <md-tab label="Tab 2" (swipeleft)="swipe(2, $event.type)" (swiperight)="swipe(2, $event.type)">Content 2</md-tab> </md-tab-group> </div>

Componente

 export class TabsOverviewExample { selectedIndex: number = 1; selectChange(): void{ console.log("Selected INDEX: " + this.selectedIndex); } SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' }; // Action triggered when user swipes swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) { console.log("swipe"); console.log("number",selectedIndex); console.log("action",action); // Out of range if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return; // Swipe left, next tab if (action === this.SWIPE_ACTION.LEFT) { const isLast = this.selectedIndex === 1; this.selectedIndex = isLast ? 0 : this.selectedIndex + 1; console.log("Swipe right - INDEX: " + this.selectedIndex); } // Swipe right, previous tab if (action === this.SWIPE_ACTION.RIGHT) { const isFirst = this.selectedIndex === 0; this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1; console.log("Swipe left - INDEX: " + this.selectedIndex); } } }

Aquí está mi versión de la respuesta de @ahmed-musallam usando este enfoque :

Modelo:

 <mat-tab-group #tabGroup [selectedIndex]="selected" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')"> ... </mat-tab-group>

Componente:

 @ViewChild('tabGroup', { static: true }) tabGroup: MatTabGroup; public selected: number; private swipeCoord?: [number, number]; private swipeTime?: number; swipe(e: TouchEvent, when: string): void { const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY]; const time = new Date().getTime(); if (when === 'start') { this.swipeCoord = coord; this.swipeTime = time; } else if (when === 'end') { const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]]; const duration = time - this.swipeTime; if (duration < 1000 // && Math.abs(direction[0]) > 30 // Long enough && Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { // Horizontal enough const swipe = direction[0] < 0 ? 'next' : 'previous'; switch (swipe) { case 'previous': if (this.selected > 0) { this.selected--; } break; case 'next': if (this.selected < this.tabGroup._tabs.length - 1) { this.selected++; } break; } } } }

Debe cambiar 'anterior' y 'siguiente' para la dirección RTL.