Angular 2: Active Router link and routerLinkActiveOptions for dynamically generated links

Question

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?

Answer 1

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>