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>

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

Table of Contents

    Chris Sevilleja

    176 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.