Angular Material Tab Active issue

user_8268644 0
Viewed 969

I'm beginner for the Angular and Angular Material, I used mat-tab

The active mat-tab is always the first tab, anyone know how to activate the 2nd tab when the using Angular material?

code 

<mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
angular6 angular-material angular
3 Answers

use the selectedIndex property

<mat-tab-group class="m-t-30" [selectedIndex]="1">
user_64286380

use the selectedIndex="yourvalue". you can use this property like this

<mat-tab-group class="m-t-30" [selectedIndex]="yourvalue">

or you can always do it dynamically by adding a loop or an iteration for each click event in your component and increment the value of the tabs, incase you have a lot of tabs.

user_103135000

Mat Tab active :-

use the mat-tab-label-active

::ng-deep .mat-tab-label-active {
      background-color : red;
      font-size : 15px
    }
user_127361610
Related