Angular Material 2 Tabs

2
votes

I'm writing an angular app and I'd like to Angular Material Tabs for navigation. The issue that I'm is that when I click in a tab it actually switch between routes but there's no change on styling in the tabs, so seems like the active tab is still the other one.

My code:

<nav md-tab-nav-bar>
  <a md-tab-link
     [routerLink]="['/page1']"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    Page1
  </a>
  <a md-tab-link
     [routerLink]="['/page2']"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    Page2
  </a>
</nav>

<router-outlet></router-outlet>
2
angularangular-material2

2 Answers

5
votes

You should be using index to set the active class to the tab,

<nav md-tab-nav-bar>
  <a md-tab-link
     [routerLink]="['/page1']" (click)="activeLinkIndex = 1"
     routerLinkActive #rla="routerLinkActive"
     [active]="activeLinkIndex === 1">
    Page1
  </a>
  <a md-tab-link
     [routerLink]="['/page2']" (click)="activeLinkIndex = 2"
     routerLinkActive #rla="routerLinkActive"
     [active]="activeLinkIndex === 2">
    Page2
  </a>
</nav>

LIVE DEMO

3
votes

I have fixed this with below code. Two changes i did, one is modified md- with mat- and instead of #rla, i used #rla1 & #rla2.

<nav mat-tab-nav-bar>
  <a mat-tab-link
     [routerLink]="['/page1']"
     routerLinkActive #rla1="routerLinkActive"
     [active]="rla1.isActive">
    Page1
  </a>
  <a mat-tab-link
     [routerLink]="['/page2']"
     routerLinkActive #rla2="routerLinkActive"
     [active]="rla2.isActive">
    Page
  </a>
</nav>

<router-outlet></router-outlet>