How to get the active tab In Angular Material2
Well, I'm not sure if I understood well your question because, by default the index always starts counting from zero unless you set manually the [selectedIndex] property
.
Anyway, if you really want to see which tab is selected on initialization you could implement the AfterViewInit
interface and do the following:
export class AppComponent implements AfterViewInit, OnInit {
...
ngAfterViewInit() {
console.log('afterViewInit => ', this.tabGroup.selectedIndex);
}
}
On other hand, if you want to check which tab is selected based on changes (what makes more sense), here you go:
HTML:
<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
Component:
tabChanged(tabChangeEvent: MatTabChangeEvent): void {
console.log('tabChangeEvent => ', tabChangeEvent);
console.log('index => ', tabChangeEvent.index);
}
DEMO
According to Material documentation Angular Material tabs output an event on tab change @Output() selectedTabChange: EventEmitter<MatTabChangeEvent>
Your Template:
<mat-tab-group (selectedTabChange)="tabChanged($event)">
<mat-tab>
<ng-template mat-tab-label>Tab 1</ng-template>
Tab Content
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>Tab 2</ng-template>
Tab Content
</mat-tab>
</mat-tab-group>
Your Typescript:
import { MatTabChangeEvent } from '@angular/material';
public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
console.log(tabChangeEvent);
}