title: How to give active class to parent router that contain some extra links in angular?
body: <p>I have the following code for generating an menu for my demo project. This is create from 3 routers like in this <a href="https://i.stack.imgur.com/dLFC9.png" rel="nofollow noreferrer">image</a>.</p>
  <pre><code>    &lt;li *ngFor=&quot;let item of items&quot;
          class=&quot;nav-links__item&quot;
          [ngClass]=&quot;{'nav-links__item--with-submenu': item.submenu}&quot;
          [routerLinkActive]=&quot;['active-link']&quot;
      &gt;
  
          &lt;a *ngIf=&quot;!(item.link | validUrl) &amp;&amp; item.link !=='/'&quot; [routerLink]=&quot;item.link | localize&quot;&gt;
              &lt;ng-container [ngTemplateOutlet]=&quot;link&quot;&gt;&lt;/ng-container&gt;
          &lt;/a&gt;
  
  &lt;/li&gt;
  </code></pre>
  <p>My problem is that this router link active sets &quot;active-link&quot; class only for items that not have submenu.</p>
  <p>For example :
  In this <a href="https://i.stack.imgur.com/xP6Af.png" rel="nofollow noreferrer">image2</a> and <a href="https://i.stack.imgur.com/qyHi4.png" rel="nofollow noreferrer">image3</a> active-link is set for router that don't have submenu.</p>
  <p>But when I click to Product router this active-link class is not setting for this router and my border bottom red style is not working.</p>