Angular 2: Active Router link and routerLinkActiveOptions for dynamically generated links
11,199
You need to set [routerLinkActive]="['linkActive']"
as you have set routerLinkActive="active"
:
<ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<li *ngFor="let d of data">
<a class="pointer" routerLinkActive="linkActive" routerLink="/list/{{d.val}}">
{{d.name}}
</a>
</li>
</ul>
Author by
Arpit
Updated on June 18, 2022Comments
-
Arpit almost 2 years
I have a menu created using list tags I want to apply a class to the parent tag when one of the child routerLink is active using routerLinkActiveOptions like this
<ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"> <li> <a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/val"> Link </a> </li> </ul>
It's works fine However when I tried same for dynamically generated menu using data array it did not work. The code for same is
<ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"> <li *ngFor="let d of data"> <a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/{{d.val}}"> {{d.name}} </a> </li> </ul>
How to acheive this, any help?