[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.

 

See Doc

 

app.component.ts:

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.css:

a{
  text-decoration: none;
}

a.active{
  font-weight: bold;
  color: darkred;
}

app.component.html:

<nav>
  <a [routerLink]="''"
     routerLinkActive="active"
     [routerLinkActiveOptions]="{exact: true}">Home</a>
  <a
    [routerLink]="'contact'"
    routerLinkActive="active"
  >Contact</a>
</nav>
<router-outlet></router-outlet>

 

Github