设置 <li> 基于路由器的角度4激活类

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?

Answer 1

Use routerLinkActive

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

 .activeNav { background-color: blue; } 

Answer 2

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