How to get the active tab In Angular Material2

Question

I want to get which tab is active. I tried to use a @ViewChild decorator and accessing the element properties that way, but it returns null.

Component:

import {Component, OnInit, ViewChild} from '@angular/core';  @Component({   selector: 'material-app',   template: `   <md-tab-group #tabGroup>       <md-tab label="Tab 1">Content 1</md-tab>       <md-tab label="Tab 2">Content 2</md-tab>   </md-tab-group>   ` }) export class AppComponent implements OnInit {    @ViewChild('tabGroup') tabGroup;    constructor() {   }    ngOnInit() {     console.log(this.tabGroup); // MdTabGroup Object     console.log(this.tabGroup.selectedIndex); // null   }  } 

Plunker Preview

Answer 1

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

Answer 2

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); }