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 ...?
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 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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With