How to get the active tab In Angular Material2 : <p>I want to get which <a href="https://material.angular.io/components/component/tabs" rel="noreferrer">tab</a> is active. I tried to use a <code>@ViewChild</code> decorator and accessing the element properties that way, but it returns <code>null</code>.</p>

<p><strong>Component:</strong></p>

<pre><code>import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'material-app',
  template: `
  &lt;md-tab-group #tabGroup&gt;
      &lt;md-tab label="Tab 1"&gt;Content 1&lt;/md-tab&gt;
      &lt;md-tab label="Tab 2"&gt;Content 2&lt;/md-tab&gt;
  &lt;/md-tab-group&gt;
  `
})
export class AppComponent implements OnInit {

  @ViewChild('tabGroup') tabGroup;

  constructor() {
  }

  ngOnInit() {
    console.log(this.tabGroup); // MdTabGroup Object
    console.log(this.tabGroup.selectedIndex); // null
  }

}
</code></pre>

<p><a href="http://plnkr.co/edit/2qjAW8G4FDCkrqVWKeHG?p=preview" rel="noreferrer">Plunker Preview</a></p>
