Video Course

Routing Angular v2+ Applications: Lesson 5 of 23

Router Links: Active

Up Next

Not Found Pages

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

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.

Chris Sevilleja

157 posts

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