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.

Table of Contents

    Chris Sevilleja

    173 posts

    Co-founder of Scotch.io. Slapping the keyboard until something good happens.