Change tab by click on a button angular material 5

Question

I have a problem since Angular 5.X with a form-wizard (mat-tab-group). Everything woks fine by using clicks on tabs, it switchs between tabs but I can't use a "nextStep" or "previousStep" buttons to switch between tabs. Here my code :

component.html

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)" class="mat-tab-group mat-primary"> 

<mat-tab label="Description">
 content...
<mat-card-content class="mat-card-content">
</mat-card-content>
 <mat-card-footer style="margin:0 auto;">
         <div fxLayout="row" fxLayoutAlign="end center">
            <button mat-button type="button" (click)="cancel()" mat-raised-button color="warn">Cancel</button>
            <button color="primary" mat-raised-button (click)="nextStep()" type="button">Next</button>                   
         </div>
     </mat-card-footer>
   </mat-tab>
</mat-tab-group>

component.ts

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    public nextStep() {
        this.selectedIndex += 1;
    }

    public previousStep() {
        this.selectedIndex -= 1;
    }

I'm stuck with [(selectedIndex)]="selectedIndex" because it doesn't work with mat-expansion-panel (Mat expansion panel is opened by default bug?). So I have to remove it but, if i remove it my buttons "nextStep" and "previousNext" doesn't work anymore...

I'm using : Angular material 5.1.1

Any idea about this ?

EDIT : As I said, the problem was about the selectedIndex... I used the selectedIndex in a condition to display the mat-expansion-panel. Bad idea... so solve the problem, I've created a boolean in my component to display or not the mat-expansion-panel. If i'm on the good tab, I set the boolean to true else, the boolean is false. Hope it's clear ^^

Possible duplicate of md-tabs Using code to goto a tab in angular 2 material design — Aravind
Your plunker is not running actually (lot of errors with angular/cdk..) — Joe Allen

mr.mikkancs mr.mikkancs · Accepted Answer · 2019-04-15T05:35:51

The problem with your solution is that the selectedIndex shall be a number! You have to set to 0 or any other index:

selectedIndex: number = 0;

You filled it with MatTabChangeEvent in tabChanged() fucntion. Remove that function or use a different variable instead.

(Try to debug with console log.)

This is a working example:

html:

  <button (click)="previousStep()">
    <mat-icon>arrow_back_ios</mat-icon>
  </button>
  <button (click)="nextStep()">
      <mat-icon>arrow_forward_ios</mat-icon>
  </button>
    <mat-tab-group [selectedIndex]="selectedIndex">
      <mat-tab *ngFor="let number of [0,1,2,3,4];let i=index; ">
        <ng-template mat-tab-label>
        </ng-template>
        content{{number}}
      </mat-tab>

ts:

selectedIndex: number = 0;

 nextStep() {
    if (this.selectedIndex != maxNumberOfTabs) {
      this.selectedIndex = this.selectedIndex + 1;
    }
    console.log(this.selectedIndex);
  }

  previousStep() {
    if (this.selectedIndex != 0) {
      this.selectedIndex = this.selectedIndex - 1;
    }
    console.log(this.selectedIndex);
  }

Change tab by click on a button angular material 5

2 Answers