Angular Material 2 unable to set default active tab

Question

Below code is taken from material.angular.io:

<nav mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet></router-outlet>

component:

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'}
  ];
}

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?

What does your router configuration look like? You need to specify a route that resolves to the component that is loaded by the `Home` tab if you want it to activate initially in this configuration. — Jaime Still, Mar 19 '18 at 15:47
Possible duplicate of [Angular2 router (@angular/router), how to set default route?](https://stackoverflow.com/questions/37605119/angular2-router-angular-router-how-to-set-default-route) — zgue, Mar 19 '18 at 15:57

score 1 · Accepted Answer · answered Mar 19 '18 at 15:47

This is because the router is most likely at the root route /. If you want the home route to be the root route you need to set your router config for this to be the case or set the default to be the home route.

RouterModule.forRoot([{
  path: '',
  component: AppComponent,
  children: [{
    path: 'home',
    component: HomeComponent,
  }],
}, {
  path: '**',
  redirectTo: '/home',
}]);

In your current setup when you click the Home tab the router is navigating the page to /home.

Angular Material 2 unable to set default active tab

1 Answers1