Add active class to routerlink in angular 4

Question

I would like to add an active class when changing routes. I have an link in one component (home page) which redirects to other component (details page).

<a routerLink="/dashboard/details" (click)="Clicked()"</a>

Now when I return back from details page to home page, I want to have the a link to be active telling the users that this link has been clicked.

I tried using routerLinkActive, but that doesn't seem to be working.

html

<a routerLink="/dashboard/details" routerLinkActive="active-link" (click)="Clicked()"</a>

css

.active-link {
    color:red;
    font-weight: bold;
}

Can anyone help me with this?

Answer 1

[routerLinkActiveOptions]="{ exact: true } u have eput this one beside the like its work

Answer 2

Why don't you add class name on click event. try this.

<a routerLink="/dashboard/details" [ngClass]="{'active-link':clicked}" routerLinkActive="active-link" (click)="Clicked()"</a>

in .ts file

clicked: boolean = false;

Clicked() {
this.clicked = true;
}

Answer 3

Solutions :

1. Can use localStorage to store the information of link clicked.

2. Can use router queryParams to store the info. Capture the info using ActivatedRoutes :

   this.route.queryParamMap.subscribe( params => { this.enableCard = JSON.parse(params.get('enableCard')); })

Not the best solution, but the work around.