How to activate/deactivate a selection of a clicked element?

Issue

I have 3 headings Administration, Market, DTA.

The selection color is on Administration,

When, the user clicks on an other heading for example Market. The selection color is always on Administration.

I would like the color to be activated on a single 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>

I can share you my code here.

The pseudo is toto and the password 1234.

Solution

Headers' route settings are not routing properly. First of all, remove slash from redirect routes of modules and change them with appropriate route. For example, route setting for the market module route can be as follows:

{
     path: '',
     pathMatch: 'full',
     redirectTo: 'indice',
},

Second, add also routerLinkActive="active" to submenus routes.

Stackblitz

Answered By - Gurkan Yesilyurt