0

The code for that is as shown below:

<div (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
    <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
        <md-tab label={{category}} *ngFor="let category of itemCategory">
        </md-tab>
    </md-tab-group>
</div>

Code for component is 

export class InfoComponent {


    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) {
        // 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);
        }
    }

}

The material version that I have used is 2.0.0-beta.11. Am i missing something here because of which the swiping functionality is not working?

Mrugesh
  • 4,381
  • 8
  • 42
  • 84
  • The native tabs component doesn't support swipe events, so you'll have to add that in yourself with the help from HammerJS. [This question and the answers](https://stackoverflow.com/questions/43118649/angular2-hammerjs-swipe-for-md-tab-group/) may help you out. – p4r1 Apr 07 '18 at 20:17
  • @p4r1 I tried the code given in that link.But somehow it is only working for first two tabs . and some times when I move to the end of the tabs , they stop working. – Mrugesh Apr 08 '18 at 05:45

0 Answers0