Angular Material 2 Tab Links unable to set default active tab

Question

After a successful login on the login page, the route changes to the "inbound" view, which has two tabs in the navbar, "inbound" and "outbound". I'd like for the "inbound" navtab to be already selected to reflect the state of the router. However, after implementing this demo, it still isn't selected by default

html:

        <nav md-tab-nav-bar *ngIf="!router.url.includes('login')">
            <a md-tab-link 
               *ngFor="let tabLink of tabLinks; let i = index"
               [routerLink]="tabLink.link"
               routerLinkActive #rla="routerLinkActive"
               [active]="rla.isActive">
                {{tabLink.label}}
            </a>
        </nav>

component:

import { Component }            from '@angular/core';
import { Router }               from '@angular/router';
import { MdTab, MdTabLink }     from '@angular/material';

@Component({
    selector: 'header',
    templateUrl: './header.component.html',
    styleUrls: [ './header.component.css' ]
})

export class HeaderComponent {     
    tabLinks = [
        { label: 'Inbound', link: 'inbound' },
        { label: 'Outbound', link: 'outbound' }
    ];
    constructor( private router: Router ) { }
}

routes:

    const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/inbound',
        pathMatch: 'full'
    },
    {
        path: 'inbound',
        component: InboundMessagesComponent,
        canActivate: [ RouteGuard ]
    },
    {
        path: 'outbound',
        component: OutboundMessagesComponent,
        canActivate: [ RouteGuard ]
    },
    {
        path: 'login',
        component: LoginComponent
    }
];