the up arrow does not change to a down arrow-CodePudding

When I click on "Portfolio", the arrow is down.

Then, a submenu appears, the arrow is up

If I click on "Portfolio", the arrow is always up.

Normally, the arrow should be down.

I don't understand how to handle this?

admin.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 }}"
      *ngIf="selectedTab !== menu.route"
      style="position: absolute; right: 20px;  "
      ></i>
   <i
      class="{{ menu.arrowUp }}"
      *ngIf="selectedTab === menu.route"
      style="position: absolute; right: 20px;  "
      ></i>
   </a>
</li>

admin.component.ts

export class AdminComponent implements OnInit {
  selectedTab: string;

  showSubmenu: any[] = [];
  showInfo: any[] = [];

  menus: any[] = [
    /* Market */
    {
      class: 'bx bx-grid-alt',
      item: 'Market',
      route: 'market',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-box',
          item: 'Item',
          route: 'item',
        },
      ],
    },

    /* Currency */

    {
      class: 'bx bx-grid-alt',
      item: 'Currency',
      route: 'currency',
    },

    /* Porfolio */

    {
      class: 'bx bx-box',
      item: 'Portfolio',
      route: 'portfolio',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-grid-alt',
          item: 'Element',
          route: 'element',
        },
      ],
    },
  ];

  constructor() {}

  ngOnInit() {}

  toggleMenu(index: number) {
    this.showSubmenu[index] = !this.showSubmenu[index];
  }

  toggleSubmenu(event: MouseEvent, item: string) {
    event.stopPropagation();
    this.showInfo[item] = !this.showInfo[item];
  }
}

I can share you the code on Stackblitz.

Thank you for your explanation.

CodePudding user response：

When someone click in menu option to unfold the submenu, hmtl code gives the variable selectedTab the value of menu.route ( (click)="toggleMenu(i); selectedTab = menu.route" ).

Then, if there's a submenu to that clicked option, the code shows the second icon (the arrowUp).

That's correct, but when you click again to fold the submenu, selectedTab continues to have the value of menu.route as its value, so it continues to show thw second icon (the arrowUp).

To prevent this, you simply have to add a guard to the *ngIfs that put one or the other icon, so that it only shows the arrowUp if the submenu is being shown (when showSubmenu[i] === true).

For instance, you just have to change this:

 <i
    class="{{ menu.arrowDown }}"
    *ngIf="selectedTab !== menu.route || !showSubmenu[i]"
    style="position: absolute; right: 20px;  "
 ></i>
 <i
    class="{{ menu.arrowUp }}"
    *ngIf="selectedTab === menu.route && showSubmenu[i]"
    style="position: absolute; right: 20px;  "
 ></i>