Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 ...?

like image 357
Heena Avatar asked Nov 03 '18 12:11

Heena


People also ask

Which tab is the default active tab?

Answer. Answer: Word's default tabs are set every half-inch. These tabs are indicated at the bottom of the horizontal ruler by tiny tick marks.

How do I stop mat tab changing?

How do you conditionally prevent users from navigating to other tab in Mat tab group? First, we need to add a click listener on the mat-tab-group and disable all tabs because if tabs are not disabled then the user will be able to navigate on them and we want to navigate on tabs conditionally not manually.

What is Mat tab in angular?

Tabs and navigation While <mat-tab-group> is used to switch between views within a single route, <nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.


1 Answers

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.

like image 103
Marshal Avatar answered Nov 14 '22 22:11

Marshal