Search code examples
angularrouterlinkactive

routerLinkActive not working for <li> and <a> Combination

The links below Works for me:

<li routerLink="/profile/education" [routerLinkActive]="'active-link'">Education</li>

<li routerLink="/profile/education" [routerLinkActive]="'active-link'"><span>Education</span></li>

<a routerLink="/profile/education" [routerLinkActive]="'active-link'">Education</a>

<h1><a routerLink="/profile/basic" [routerLinkActive]="'active-link'">Education</a></h1>

But the link doesn't work for me:

<li><a routerLink="/profile/basic" [routerLinkActive]="'active-link'">Education</a></li>

I want to know what's the problem with li and a combination?

Solution

  • Please check your CSS maybe it will be on li(tag) not for a(tag). You can put CSS active class on a(tag)