app.component.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"> <a routerLink="/">Home</a> </li> <li role="presentation" routerLinkActive="active"> <a routerLink="/servers">Servers</a></li> <li role="presentation" routerLinkActive="active"> <a [routerLink]="['/users']">Users</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <router-outlet></router-outlet> </div> </div> </div>
References
https://angular.io/guide/router#active-router-links