8

I would like to apply special CSS style properties to active router links:

<a [routerLink]='link'>{{name}}</a>

Here is what I tried so far (Using the default router-link-active class):

.router-link-active {
 color: #000;
 font-weight: bold;
}

It doesn't work and I really don't understand why.

Platus
  • 1,753
  • 8
  • 25
  • 51
  • 4
    I don't think it's actually a duplicate; the other question was for Angular 1, while this is angular2, and angular2's router is several versions removed from angular1's. – Hawken MacKay Rives Aug 01 '16 at 07:54

3 Answers3

24

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

Jarod Moser
  • 7,022
  • 2
  • 24
  • 52
  • 1
    this works fine, and how can I get a boolean inside my component typescript class indicating if the router link is active or not? – Platus Jul 15 '16 at 19:15
  • So... is it that you just need to know if there is an element on your page that has the router-link-active class? or are you trying to find out which route is currently active? – Jarod Moser Jul 15 '16 at 19:18
  • I want to find out which route is currently active, actually I have a single router link in a TabComponent's template and I then generate many router links using *ngFor in a parent component – Platus Jul 15 '16 at 19:22
  • 1
    In that case you would need to look into using [ActivatedRoute](https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html) it returns everything you could want and more about the component that has been loaded. If you end up having troubles implementing it, please create a new question – Jarod Moser Jul 15 '16 at 19:26
  • Works with released 2.0 version too. – Anmol Gupta Oct 21 '16 at 22:10
  • however if you add a click function to the a-tag and change the location based on #href tag - it drops the pseudo active class styling -- so how would you bind that tag to an id on the page once clicked? – Crystal Feb 22 '18 at 19:41
3

The new router has a directive called "routerLinkActive" which is what your interested in.

Ex.<a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a>

"When the url is either '/user' or '/user/bob', the active-link class will be added to the a tag. If the url changes, the class will be removed."

Ron
  • 209
  • 2
  • 6
1

Without knowing anything more, this is the direction I would point you in.

<a [routerLink]='link' [ngClass]="{'router-link-active': routerLink.something === something}">{{name}}</a>

If routerLink.something === something, or whatever expression you want, evaluates to true, the class (and styling) will be applied.

jake
  • 488
  • 10
  • 19