RouterLinkActive In Angular

The Code Points June 17, 2022 0

In this article, we learn what is RouterLinkActive and how to use RouterLinkActive In Angular. The RouterLinkActive directive allows you to add or remove classes from a RouterLink-bound HTML element. We may use this directive to change the CSS classes for active Router Links depending on the RouterState. This directive's primary purpose is to indicate which route is currently active. You can make the font strong or use a different backdrop color.

RouterLinkActive

Along with the RouterLink directive, the RouterLinkActive directive is used. A Template expression can be found on the right-hand side of RouterLinkActive. When the route is active, the template expression must contain a space-delimited string of CSS classes that will be applied to the element.

Take a look at the following examples.

<li><a [routerLink]="['home']" routerLinkActive="active">Home</a></li>
 
<li><a [routerLink]="['product']" [routerLinkActive]="['active']">Product</a></li>

The global styles are determined by the CSS Rule.

.active {
  background-color: yellow;
}

The Angular router adds the "active" class to the activated element when the user navigates to any of the above routes. The class will be removed when the user navigates away.

Angular does this by keeping an eye on the URL. The classes defined in the RouterLinkActive directive are applied whenever the Url matches the URL of the routerLink directive. It will be removed from the element if it does not match.

We may use this to change the background or foreground color of our navigation links.

Multiple classes

As seen below, you can use the routerLinkActive directive to add several classes.

<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
 
<li><a [routerLink]="['home']" routerLinkActive="active  home">Home</a></li>
<li><a [routerLink]="['product']" [routerLinkActive]="['active','home']">Product</a></li>

Child Routes

When a child route becomes active, all of the parent routes become active as well, and routerLinkActive is applied to the URL tree all the way to the top.

As an example,

<a routerLink="/product" routerLinkActive="class1 class2">Product</a>
<a routerLink="/product/PC" routerLinkActive="class1 class2">PC</a>
<a routerLink="/product/mobile" routerLinkActive="class1 class2">Mobile</a>

In the preceding example. The RouterLinkactive class (i.e. class1 class2) is also added to the /product element when the URL is either /product/PC or /product/mobile, as it is the parent of these child routes.

Exact matching

You can prevent this by using the routerLinkActiveOptions to pass the exact: true to the RouterLinkactive, as seen below.

<a routerLink="/product" routerLinkActive="class1 class1" [routerLinkActiveOptions]="{exact:true}">Product</a>
<a routerLink="/product/PC" routerLinkActive="class1 class2">PC</a>
<a routerLink="/product/mobile" routerLinkActive="class1 class2">Mobile</a>

This will only apply to the RouterLinkactive if the route URL matches the current URL exactly.

Matching

Before returning true, the routerActiveLink checks the following requirements.

without exact: true

• Only a portion of the queryParams is matched.
• The URL tree has a subtree called URL.
• Parameters in the matrix are disregarded.

with exact: true

• a question Parameters must be identical.
• The URL must be identical.
• Parameters in the matrix are disregarded.

Adding classes to ancestors

The RouterLinkActive directive can be applied to a RouterLink's ancestor.

<div routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/product/pc">Jim</a>
  <a routerLink="/product/mobile">Bob</a>
</div>

If the URL is either /product/pc or product/mobile, this will set the active class on the div tag.

Bind to Component Property

You can also use a template expression to bind RouterLinkActive to a component property that returns a string of classes.

<li><a [routerLink]="['home']" routerLinkActive="{{getClass()}}">Home</a></li>

In component class

getClass() {
  return "active"
}

Conclusion

The RouterLinkActive directive was introduced to us. Apply multiple styles to this to show the user the current route.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.