What is Router Active Class in Angular 4 ?
When we want each navigation should have active class, so there we need to use [routerLinkActive] attribute.
–HTML file
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li routerLinkActive="active"><a routerLink="">Recipes</a></li> <li routerLinkActive="active"><a routerLink="shopping-list">Shopping List</a></li> </ul> </div> </div> </nav>
routerLinkActiveOptions in Angular 4
If you are seeing this type navigation home and user both link active. You need to just add one more property routerLinkActiveOptions.
<ul> <li role="presentation" routerLinkActive="active"><a routerLink="">Home</a></li> <li role="presentation" routerLinkActive="active"><arouterLink="/servers">Servers</a></li> <li role="presentation" routerLinkActive="active"><arouterLink="/users">Users</a></li> </ul>
TO
<ul>
<li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a routerLink="">Home</a></li>
<li role="presentation" routerLinkActive="active"><arouterLink="/servers">Servers</a></li>
<li role="presentation" routerLinkActive="active"><arouterLink="/users">Users</a></li>
</ul>
