Enhance Your Angular Mastery with the Router: Change Styles According to the Route

Twitter(X): https://twitter.com/fredydlemus
Instagram: https://www.instagram.com/fredydlemus/

If you're working with Angular's Router, you might have noticed that sometimes you want to customize the styles of your components based on the route you are on. Fortunately, Angular's Router offers us a tool to accomplish this: the routerLinkActive directive. In this article, I will guide you on how to leverage the routerLinkActive directive to breathe new life into your Angular applications and ensure each route possesses its distinct style. Let's get started!

Imagine we have a menu furnished with buttons that lead us to different routes, each showcasing distinct components beneath the menu upon clicking on them.

<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">
          <a routerLink="/">Home</a>
        </li>
        <li role="presentation">
          <a routerLink="products">Products</a>
        </li>
        <li role="presentation">
          <a routerLink="users">Users</a>
        </li>
      </ul>
    </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>
</div>

Our goal is that when a button on the menu is clicked and redirects to the corresponding route, it also changes its style to indicate to the user that it's currently active. We can add or remove css classes to achieve this, and this is where the routerLinkActive directive comes into play.

The routerLinkActive directive enables us to detect whether the route linked in the element is active and specifies one or more CSS classes. This way, we can tailor the style of our elements based on the route we are on. This directive is extremely handy for providing visual feedback to the user regarding their current location within the application and making navigation more intuitive.

To utilize the routerLinkActive directive, you need to append it to the tag linked to the route you wish to detect. The "active" CSS class will be added to the tag when the linked route is active. If the user navigates to any other route, the "active" class will be removed.

...

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active">
    <a routerLink="/">Home</a>
  </li>
  <li role="presentation" routerLinkActive="active">
    <a routerLink="products">Products</a>
  </li>
  <li role="presentation" routerLinkActive="active">
    <a routerLink="users">Users</a>
  </li>
</ul>

Here it is at “/”

Here it is at “/products”

Here it is at "/users"

However, we encounter a very common issue, where the 'Home' button always appears active, even when we are navigating through other routes. This happens because the 'Home' button is linked to the "/" route, and since our other routes also contain "/", Angular's Router recognizes them as active and activates the 'Home' button.

To rectify this problem, we can utilize the routerLinkActiveOptions feature of the routerLinkActive directive. This feature allows us to specify that Angular should consider the exact route when determining when to add or remove classes. This way, we can ensure that the 'Home' button will only be activated when we are on the root route, and not when we are on other routes that contain "/".

...

<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="products">Products</a>
  </li>
  <li role="presentation" routerLinkActive="active">
    <a routerLink="users">Users</a>
  </li>
</ul>

I hope this post has been beneficial and you've gleaned some insights into utilizing the routerLinkActive directive in Angular. If you have any further questions or require additional assistance, please don't hesitate to let me know. Until next time!.