title: How to get the active tab In Angular Material2
body: <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>