Angular 2: Active Router link and routerLinkActiveOptions for dynamically generated links
<p>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</p>

<pre><code> &lt;ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;
      &lt;li&gt;
        &lt;a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/val"&gt; 
             Link
         &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>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 </p>

<pre><code> &lt;ul class="treeview-menu" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;
      &lt;li *ngFor="let d of data"&gt;
        &lt;a class="pointer" [routerLinkActive]="['linkActive']" routerLink="/list/{{d.val}}"&gt; 
          {{d.name}}
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>How to acheive this, any help?</p>