在 Angular 中打开新项目时折叠已经消耗的项目

Question

I have this much code to form a tree structure of sideBar Menu, and this is working fine. But what i want is suppose a menu have its submenu and it is expanded. Once the user click on any other parent menu the expanded menu should collapsed. Can any please help me regarding this?

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list">
        <a (click)="item.isopen = !item.isopen">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: item.isopen }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && item.isopen">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

payload of::

 pageMenus = [
    {
      "menuName": "Dashboard",
      "menuIcon": 'dashboard',
      "path": "",
      "children": [
        {
          "menuName": "Status",
          "menuIcon": "",
          "path": "/dashboard",
        }
      ]
    }, {
      "menuName": "Database",
      "menuIcon": 'layers',
      "path": "",
      "children": [
        {
          "menuName": "Users",
          "menuIcon": "",
          "path": "/user",
        },
        {
          "menuName": "Devices",
          "menuIcon": "",
          "path": "/device",
        },
        {
          "menuName": "Sessions",
          "menuIcon": "",
          "path": "/session",
        }
      ]
    }
]

Answer 1

Instead of using isOpen variable for each item, you can openIndex. if itemIndex is equal to open index then only show child menu

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list; let index = index">
        <a (click)="openIndex = openIndex === index ? -1 : index">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: openIndex === index }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && openIndex === index">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

You will have to create a new variable openIndex in your component.