title: Angular Material 2 unable to set default active tab
body: <p>Below code is taken from <a href="https://material.angular.io/components/tabs/overview" rel="nofollow noreferrer">material.angular.io</a>:</p>
  
  <pre><code>&lt;nav mat-tab-nav-bar&gt;
    &lt;a mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link.path"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive"&gt;
      {{link.label}}
    &lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    navLinks = [
      {label: 'Home', path: 'home'},
      {label: 'Contacts', path: 'contacts'},
      {label: 'Settings', path: 'settings'}
    ];
  }
  </code></pre>
  
  <p>When i tried to run this sample, the nav requires clicking on home for the component to be opened.
  I want the contents of home to be displayed initially.
  How do you set the first value as the default active tab?</p>