Apply CSS to active router link [Angular 2]

Question

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.

Solution 1

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

Solution 2

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."

Solution 3

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.

Comments

[Platus]

this works fine, and how can I get a boolean inside my component typescript class indicating if the router link is active or not?

[Jarod Moser]

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?

[Platus]

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

[Jarod Moser]

In that case you would need to look into using ActivatedRoute 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

[Anmol Gupta]

Works with released 2.0 version too.

[Crystal]

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 <a> tag to an id on the page once clicked?