RouterLinkActive in Angular

The RouterLinkActive is a directive for adding or removing classes from an HTML element that is bound to a RouterLink. Using this directive, we can toggle CSS classes for active Router Links based on the current RouterState. The main use case of this directive is to highlight which route is currently active. You can either make the font bold or apply some background color.

RouterLinkActive

The RouterLinkActive Directive is applied along with the RouterLink directive. The right-hand side of RouterLinkActive contains a Template expression. The template expression must contain a space-delimited string of CSS classes, which will be applied to the element when the route is active.

For Example, consider the following examples

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

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

With the CSS Rule defined as the global styles.

.active {
  background-color: yellow;
}

When the user navigates to any of the above routes, the Angular router adds the “active” class to the activated element. And when the user navigates away the class will be removed.

The Angular does this by watching the URL. Whenever the Url matches with the URL of the routerLink directive, it applies the classes defined in the RouterLinkActive directive. When it does not match it will be removed from the element.

Using this we can apply different background or foreground color to our navigation links.

Multiple classes

You can add multiple classes to the routerLinkActive directive as shown below

<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 the child route is active, then all the parent routes are also marked as active and routerLinkActive is applied to URL tree cascading all the way to the top.

For 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 above example. When the URL is either /product/PC or /product/mobile, the RouterLinkactive class (i.e. class1 class2) is added to the /product element also as it is the parent of these child routes.

Exact matching

You can stop that from happening by, passing the exact: true to the RouterLinkactive using the routerLinkActiveOptions as shown 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 make the RouterLinkactive to be applied only if the route URL matches exactly to the current URL

Matching

The routerActiveLink follows the following criteria before returning true

without exact: true

• A subset of the queryParams is matched.
• The URL is a subtree of the URL tree.
• Matrix params are ignored

with exact: true

• A queryParams must match exactly
• The URL must match exactly
• Matrix params are ignored

Adding classes to ancestors

You can apply the RouterLinkActive directive to an ancestor of a RouterLink.

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

This will set the active class on the div tag if the URL is either /product/pc or product/mobile

Bind to Component Property

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

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

In component class

getClass() {
  return "active"
}

References

https://angular.io/api/router/RouterLinkActive

Summary

We learned how to make use of RouterLinkActive directive. Use this to show the user the current route by applying a different styles.