How to set the tab as default tab in angular using angular material Tabs

3566 views angular
-1

I have implemented a sample angular app using the Grid and Tab components from angular material.

I have implemented data bonding between the grid and tabs such that number of grid values available that many tabs gets opened up.

But addition to this I have a ALL Summary Tab always available irrespective of grid values.

Please access my sample app here..

In my app I have the All Summary Tab set as default and its active as first run my application.

But I need to have the second tab to be active as I run my app ....can any body please help me to resolve this ...?

answered question

MatTabGroup has a selectedIndex input: material.angular.io/components/tabs/api#MatTabGroup. So use [selectedIndex]="1".

1 Answer

13

You can programmatically change the tab using selectedIndex.

This for example will set the tab to Ashlock, Jennifer

<mat-tab-group headerPosition="above" [selectedIndex]="1">

You can replace 1 with a variable in your component and change the index value to what ever you want it to be.

posted this

Have an answer?

JD

Please login first before posting an answer.