What is routerLinkActive in Angular and know its uses

Updated on: September 20, 2019

routerLinkActive different Uses, its Effects:


Following is the snippet of Home and Login links shown in the following image:

<a routerLink="/">Home</a> &nbsp;&nbsp;
<a routerLink="/login" routerLinkActive="link-active-Login">Login</a>
</div>
<router-outlet></router-outlet>


As you can see in the above Angular template code, we have two links, one is Home and another is Login, for Login link we have used routerLinkActive attribute and we have set a value to this attribute as "link-active-Login". This is a CSS class we have to set as a value to this attribute. We can handle this tag through CSS class which we have set here. We can use multiple options like :hover, :visited, :active

We also can set multiple CSS class to this attribute. As shown below we have set "link-active-Login" and "nav-links" class to "Login" anchor tag. We have added font-size and padding effects to this tag and after adding these effects, it started showing these effects on the browser.