title: Angular 8 - How to add active class to an a tag which doesn't has any router link
body: <p>I am creating Submenus in my Angular project.</p>
  <p>The requirement is that when we click on a menu and if it has a child Menu then expand it. So When a child menu link is active and we collapse the Parent menu then the Parent menu should Have the <strong>active class</strong> on it. so that we know this parent menu's child link is opened therefor it is <strong>highlighted</strong>.</p>
  <p>In my case when I collapse the Parent Menu the <strong>active class removes</strong> from the parent menu and it is hard to identify which menu link's page is opened.</p>
  <p>For example: Before collapsing
  <a href="https://i.stack.imgur.com/i7JrT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7JrT.png" alt="Before Collapsing" /></a></p>
  <p>after Collapsing -<a href="https://i.stack.imgur.com/HqaeZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HqaeZ.png" alt="After Collapsing" /></a></p>
  <p>Code -
  HTML Template</p>
  <pre><code>      &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/dashboard/report&quot; #dashboard=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--dashboard&quot;&gt;&lt;/span&gt;
                    &lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Dashboard&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/dashboard/allocate&quot; #capacityPlanning=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--task&quot;&gt;&lt;/span&gt;
                    &lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Capacity Planning&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
              &lt;li&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#pageSubmenu&quot; data-toggle=&quot;collapse&quot; aria-expanded=&quot;false&quot; expandMenu&gt;
                      &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--dashboard&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Projects Master&lt;/span&gt;
                      &lt;span class=&quot;fa fa-lg fa-caret-left site_sidebar-main_down-icon&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class=&quot;collapse submenu&quot; id=&quot;pageSubmenu&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; routerLink=&quot;/project/list&quot; #projects=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                          &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--bu&quot;&gt; &lt;/span&gt;
                          &lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Projects list&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class=&quot;nav-link&quot; routerLink=&quot;/resource/list&quot; #resource=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                          &lt;span class=&quot;fa fa-lg site_sidebar-main_link--resources&quot;&gt;&lt;/span&gt;&lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Resources&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/team-type/list&quot; #team=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--team&quot;&gt;&lt;/span&gt;&lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Team type&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/team/list&quot; #resource=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--resources&quot;&gt;&lt;/span&gt;&lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Team&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/projectType/list&quot; #resource=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--resources&quot;&gt;&lt;/span&gt;&lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Project Type&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a class=&quot;nav-link&quot; routerLink=&quot;/region/list&quot; #resource=&quot;routerLinkActive&quot; routerLinkActive=&quot;active&quot;&gt;
                    &lt;span class=&quot;fa fa-lg site_sidebar-main_icon site_sidebar-main_link--resources&quot;&gt;&lt;/span&gt;&lt;span class=&quot;site_sidebar-main_link-title&quot;&gt;Regions&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
  
        &lt;/ul&gt;
    &lt;/nav&gt;
  </code></pre>
  <p>CSS -</p>
  <pre><code>ul li a.active {
      background-color: #fff;
      border-radius: px2rem(30) 0 0 px2rem(30);
      color: blue !important;
      transition: all 0.3s ease;
  }
  ul li a.active &gt; .site_sidebar-main_down-icon{
    transform: rotate(270deg);
  } 
  
  a[data-toggle=&quot;collapse&quot;] {
      position: relative;
  }
   .submenu{
     padding-left: px2rem(15);
   }
  </code></pre>
  <p>Now I want to add here that when any child menu link is opened and if we collapse the parent menu then keep the parent menu class active (highlighted).</p>
  <p>Any suggestion on how to achieve this implementation is welcome.</p>