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

Continue reading →