Apply CSS to Active Router Link [Angular 2]

Apply CSS to active router link [Angular 2]

Currently Angular 2 has a built in attribute that you can use on any link that is used with [routerLink] it is routerLinkActive so all you need to do is have:

<a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>

and then it will recognize which route is the current active route and apply your router-link-active class.

NOTE:

For those who are using routerLink on tags other than a tags, (personally i am using it on a button) routerLinkActive doesn't work but should work on the next release of the router - https://github.com/angular/angular/issues/9755

Apply different styles when routerlink active and not active

Found a solution.
Answer is

<li  #rla="routerLinkActive" routerLinkActive [ngClass]="{'border-primary':rla.isActive}" 
 class=" px-4  border-b-4">

  <a
    class=" text-gray"
    routerLink="{{routeTo}}"
  >{{ tabName }}</a
  >
</li>

In Angular, how do you determine the active route?

With the new Angular router, you can add a [routerLinkActive]="['your-class-name']" attribute to all your links:

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

Or the simplified non-array format if only one class is needed:

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

Or an even simpler format if only one class is needed:

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

See the poorly documented routerLinkActive directive for more info. (I mostly figured this out via trial-and-error.)

UPDATE: Better documentation for the routerLinkActive directive can now be found here. (Thanks to @Victor Hugo Arango A. in the comments below.)

Angular5, setting active class for RouterLink

@vikas and @Mertcan Diken already showed you the solution! I show you how you should use it.

The 'angular' router knows which route is active and will set a class on the active a tag for you. You only have to define which class should be set.

.css

.active-route {
    background: black;
    border-bottom: 2px solid red;      
}

.html

<nav class="nav-list">
    <a routerLink="/dashboard" routerLinkActive="active-route" class="nav-link" >Dashboard</a>
    <a routerLink="/products" routerLinkActive="active-route" class="nav-link">Products List</a>
</nav>

On routerLinkActive=active change the color of child mat-icon inside button

Easiest way is to add this in your CSS -- probably best is to add it globally:

.active .mat-icon{
   color: inherit;
}

How to add active class to link which has fragmment in angular?

In angular we add routerLinkActive directive to add css class(say active class) to the link. This directive will add active class to the particular link when it's active. But fragments won't be counted for this scenario.

To rectify this issue, If you're using router version 7.2.4, We can fix easily with the following code [routerLinkActiveOptions]="{ exact: true }"

Then the original code will look like the below one:

<div class="sidenav-container">
  <div class="list">
    <mat-list role="list">
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="report"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          >1. Report</a
        ></mat-list-item
      >
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          routerLinkActive="active"
          fragment="profile"
          [routerLinkActiveOptions]="{ exact: true }"
          >2. Profile</a
        >
      </mat-list-item>
    </mat-list>
  </div>
</div>

If the router version is below 7.2.4, we've to use the below approach to fix this issue.

Inject ActivatedRoute the in componnet

code will look as below:

import { ActivatedRoute } from '@angular/router';
import { share } from 'rxjs/operators';

activeFragment = this.route.fragment.pipe(share());
constructor(public route: ActivatedRoute) {}

Then we've to add the class as below to the HTML template.

[class.active]="(activeFragment | async) === 'report'"

The full code in HTML will look as the below:

<div class="sidenav-container">
  <div class="list">
    <mat-list role="list">
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="report"
          [class.active]="(activeFragment | async) === 'report'"
          >1. Report</a
        ></mat-list-item
      >
      <mat-list-item role="listitem"
        ><a
          routerLink="./"
          fragment="profile"
          [class.active]="(activeFragment | async) === 'profile'"
          >2. Profile</a
        >
      </mat-list-item>
    </mat-list>
  </div>
</div>

---

Related Topics