I am struggling with the selection color of my headings which include Administration, Market, DTA.
https://i.stack.imgur.com/luqeP.png
The issue is that the selection color stays on Administration, even when a user clicks on another heading like Market.
https://i.stack.imgur.com/yn9YQ.png
I want the color to only be activated on the clicked heading.
dashboard.component.html
<ul class="nav-links" *ngFor="let menu of menus; let i = index">
<li [ngClass]="{ selected: selectedTab === menu.route }">
<a
routerLink="{{ menu.route }}"
routerLinkActive="active"
(click)="toggleMenu(i); selectedTab = menu.route"
>
<i class="{{ menu.class }}"></i>
<span class="links_name"> {{ menu.item }} </span>
<i
class="{{ menu.arrowDown }} iconArrow"
*ngIf="selectedTab !== menu.route || !showSubmenu[i]"
></i>
<i
class="{{ menu.arrowUp }} iconArrow "
*ngIf="selectedTab === menu.route && showSubmenu[i]"
></i>
</a>
</li>
<ng-container *ngFor="let submenu of menu.submenus; let j = index">
<li *ngIf="showSubmenu[i]">
<a routerLink="{{ submenu.route }}">
<i class="{{ submenu.class }}"></i>
<span class="links_name"> {{ submenu.item }} </span>
</a>
</li>
</ng-container>
You can view my code here.
The pseudo username is toto and the password is 1234.