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  *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 ></i>
        <span > {{ menu.item }} </span>
        <i
          
          *ngIf="selectedTab !== menu.route || !showSubmenu[i]"
        ></i>
        <i
          
          *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 ></i>
          <span > {{ submenu.item }} </span>
        </a>
      </li>
    </ng-container>

I can share you my code here.

The pseudo is toto and the password 1234.

CodePudding user response：

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