htmlangulartypescriptangular-materialmat-tab

Switch To the last mat-tab with if(){}


i got 3 mat tabs and i want to open the third tab (Tab 3) with if(){} when enter the page. Is it possible ?

<mat-tab-group mat-align-tabs="center" style="width: 100%;" >
 <mat-tab label="Tab 1"></mat-tab>

 <mat-tab label="Tab 2"></mat-tab>

 <mat-tab label="Tab 3"></mat-tab>
</mat-tab-group>

Solution

  • You can use "selectedIndex" on mat-tab-group

    example:

    <mat-tab-group mat-align-tabs="center" style="width: 100%;" [selectedIndex]="selectedTab">
     <mat-tab label="Tab 1"></mat-tab>
    
     <mat-tab label="Tab 2"></mat-tab>
    
     <mat-tab label="Tab 3"></mat-tab>
    </mat-tab-group>
    

    and in Typescript:

    selectedTab=0;
    if(*/ condition */){
    selectedTab= 2; */ tab number you want -1 */
    }