Setting
class to active with angular 4 based on router

Question

I am pretty new with angular 4 and i have this problem that i cant solve on my own.

My home url is localhost:4200/, and the other one is localhost:4200/wortschaz.

I want to use angular *ngIf to give an active class to a certain div based on router. So if url is localhost:4200/wortschaz then i want to set class to a div that has content for that.

Can somebody help me with this one?

Possible duplicate of [In Angular 2 how do you determine the active route?](https://stackoverflow.com/questions/34323480/in-angular-2-how-do-you-determine-the-active-route) — mxr7350, Oct 09 '17 at 10:43

Faly · Accepted Answer · 2017-10-09T10:42:58.080

1

Use routerLinkActive

<a  routerLink="/wortschaz" routerLinkActive="activeNav">Wortschaz</a>

.activeNav {
    background-color: blue;
}

edited Oct 09 '17 at 10:42

answered Oct 09 '17 at 10:32

Faly

13,291
2
19
37

tobie · Answer 2 · 2017-10-09T15:36:17.143

1

Just add <li><a routerLink='/wortschaz ' routerLinkActive='active'>wortschaz </a></li>. The routerLinkActive takes care of it

edited Oct 09 '17 at 15:36

answered Oct 09 '17 at 10:34

tobie

187
10

Setting class to active with angular 4 based on router

2 Answers2

Setting
class to active with angular 4 based on router