CODEWITHSUNDEEP
javascripthtmlangular
dj.milojevic
dj.milojevic

Reputation: 214

Setting <li> class to active with angular 4 based on router

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?

Upvotes: 1

Views: 62

Answers (2)

tobie
tobie

Reputation: 187

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

Upvotes: 1

Faly
Faly

Reputation: 13356

Use routerLinkActive

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

.activeNav {
    background-color: blue;
}

Upvotes: 1

Related Questions