I am facing an issue with the routerLinkActive class in my application. I have two sections, one for pinned tools and one for all tools. Both sections have the same routerLink defined. The problem is that when I click on a link in the pinned tools section, the routerLinkActive class is applied to both the pinned tools and all tools sections. I want the routerLinkActive class to be applied only to the clicked link in the pinned tools section.
Here is the code for the All Tools section:
<ul class="dropdown-list" id="parentdrop{{i}}">
<li class="custommy" *ngFor="let subitem of item.submenus; let j = index;" id="clickedSubMenu{{j}}" (click)="expandSubMenu($event,j,i)">
<a [routerLink]="['/app/' + subitem.menu.split(' ').join('').replace('-','')]" [routerLinkActive]="['allToolsActive']" (click)="alltoolsCheckClick(subitem.id, subitem.menu)" id="clickedSMenu{{i}}">{{subitem.menu}}</a>
</li>
</ul>
And here is the code for the Pinned Tools section:
<div id="{{sub.id}}" class="pinnedtools__list" [routerLink]="['/app/' + sub.menu.split(' ').join('').replace('-','')]" [routerLinkActive]="['active']" #rla1="routerLinkActive" (click)="pinnCheckClick(sub.id, sub.menu!==' '?sub.menu:sub.category)">
<span>
<img src='{{ "/src/assets/icons/" + sub.category + ".svg" }}' class="pinnedmenu__img__icon" />
</span>
<div class="navList__subheading-title">
<span class="sub_category">{{sub.category}}</span>
<div>{{sub.menu}}</div>
</div>
</div>