Angular Material 5: how to call a function when a tab is selected (clicked)?
The selectedTabChanged
event has to be attached to the <mat-tab-group>
element
<mat-tab-group (selectedTabChange)="tabClick($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
tabClick(tab) {
console.log(tab);
}
Demo
<mat-tab-group (selectedTabChange)="onChange($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
Selected tab will trigger out the tabChange Event and get the active tab.
And in the .ts
file:
onChange(event: MatTabChangeEvent) {
const tab = event.tab.textLabel;
console.log(tab);
if(tab===" Tab 1")
{
console.log("function want to implement");
}
}
An event should be selectedTabChange
to the mat-tab-group
<mat-tab-group (selectedTabChange)="tabClick()">
<mat-tab label="Regular">
<h1>Some more tab content</h1>
</mat-tab>
</mat-tab-group>