Seting Bootstrap navbar “active” class in Angular 2/4/5

Specify the active class in routerLinkActive directive of anchor tag like below.

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

PS: By making { exact: true } in routerLinkActiveOptions will activate the route only when the whole path matches.

References: https://angular.io/api/router/RouterLinkActive