I want to change activated mat-tab in typescript file. Here Programmatically select md-tab in Angular 2 material I found the closest solution but for md-tab not mat-tab.I tried this but didn't work.Here what I tried

HTML

  <button class="btn btn-primary" (click)="changeTab()">Click me!</button>

    <mat-tab-group [selectedIndex]="selectedTab">
        <mat-tab label="Preview"> 
    </mat-tab>
        <mat-tab label="Tuning">
        <car-tuning></car-tuning>
        </mat-tab>
        <mat-tab label="Payment"></mat-tab> 
      </mat-tab-group> 

.TS File

 changeTab() {
     this.selectedTab =1;
}

I want to change activated mat-tab in typescript file. Here Programmatically select md-tab in Angular 2 material I found the closest solution but for md-tab not mat-tab.I tried this but didn't work.Here what I tried

HTML

  <button class="btn btn-primary" (click)="changeTab()">Click me!</button>

    <mat-tab-group [selectedIndex]="selectedTab">
        <mat-tab label="Preview"> 
    </mat-tab>
        <mat-tab label="Tuning">
        <car-tuning></car-tuning>
        </mat-tab>
        <mat-tab label="Payment"></mat-tab> 
      </mat-tab-group> 

.TS File

 changeTab() {
     this.selectedTab =1;
}

• javascript
• angular
• typescript
• angular-material

Share Follow edited Dec 28, 2019 at 1:38 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Sep 12, 2019 at 12:31 Timuçin ÇiçekTimuçin Çiçek 1,62633 gold badges2424 silver badges5151 bronze badges 1

• There's an example on the site showing how to programmatically set the selected tab (fourth one down). – Heretic Monkey Commented Sep 12, 2019 at 12:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can add two way binding like this [(selectedIndex)]="selectedTab" and should give you result.

<button class="btn btn-primary" (click)="changeTab()">Click me!</button>

<mat-tab-group [(selectedIndex)]="selectedTab"> //<--- changes
   <mat-tab label="Preview"> 
   </mat-tab>
   <mat-tab label="Tuning">
     <car-tuning></car-tuning>
   </mat-tab>
    <mat-tab label="Payment"></mat-tab> 
</mat-tab-group> 

In ts:

changeTab() {
   this.selectedTab = 1 //<------- your tab value
}

yes you can change like this.

<mat-tab-group [(selectedIndex)]="selectedIndex">
    <mat-tab>

    </mat-tab>
    <mat-tab>

    </mat-tab>
    <mat-tab>

    </mat-tab>
</mat-tab-group>

In ts use:

selectedIndex: number;

in your function

this.selectedIndex = whateverIndexYouWant;

here is how I change activated index from ts.

this.data.currentMessage.subscribe(message => {
  switch (message) {
    case 'blabla':
      this.selectedIndex = 0;
      break;
    case 'blablablabla':
      this.selectedIndex = 1;
      break;
    case 'blablablablablabla':
      this.selectedIndex = 2;
      break;
  }
});