Routing Angular Applications

Router Links: Active

To add a certain class based on if a certain route is active, we can use routerLinkActive.

For our links, we can add the following:

<ul class="nav navbar-nav">
  <li><a routerLink="/" routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }">Home</a></li>
  <li><a routerLink="/about" routerLinkActive="active" >About</a></li>
  <li><a routerLink="/contact" routerLinkActive="active" >Contact</a></li>
</ul>

The above will add the active class if the route found in routerLink matches the current route.