Sidebar menu and angular animation (not working properly)

Question

Problem: When i click on Books or Tables items it should open just on clicked item. But it opens both. The event fires multiple. And i how can i isolate them? i need standart sidebar-menu behavior. Can't solve this problem two days yet. Maybe some of you had faced before. Thank you.

Sidebar structure

Dashboard
Books
    Novels
    Romances
Tables
    Rounded
    Squares
Documents
Helps

Html

<ul> 
<li><a routerLink="/dashboard">Dashboard</a></li>
<li  routerLinkActive="u-sidebar-nav--opened">
  <a href="javascript:;" (click)="toggle($event)"routerLinkActive="active">
   Books
  </a>
  <ul [@actionSubmenuShow]="isActionOpen ? 'open' : 'closed'" 
      style="display: none;">       
    Submenu list...      
  </ul> 
</li> 
<li routerLinkActive="u-sidebar-nav--opened">
  <a href="javascript:;"(click)="toggle($event)"routerLinkActive="active">
   Tables
  </a>
  <ul [@actionSubmenuShow]="isActionOpen ? 'open' : 'closed'" 
      style="display: none;">
    Submenu list ...
  </ul> 
</li> 
</ul>

Component

isActionOpen = false;

  toggle() {
    this.isActionOpen = !this.isActionOpen;
  }

Animation.ts

export const submenuActionTrigger = trigger('actionSubmenuShow', [
  state('open', style({
    display: 'block'
  })),
  state('closed', style({
    display: 'none'
  })),
]);

Answer 1

You can create two isolate boolean variables.

In complex menu you can use *ngFor and refactor your solution

.html file

<ul>
    <li *ngFor="let menuItem of menuList">
        <a *ngIf="!menuItem.submenuItems" [routerLink]="menuItem.routerLink">{{menuItem.name}}</a>
        <a *ngIf="menuItem.submenuItems"
           (click)="menuItem.opened = !menuItem.opened"
           routerLinkActive="active"
        >
            {{menuItem.name}}
        </a>
        <ul [@actionSubmenuShow]="menuItem.opened ? 'open' : 'closed'"
            style="display: none;">
            <li *ngFor="let submenuItem of menuItem.submenuItems">
                <a [routerLink]="submenuItem.routerLink">{{submenuItem.name}}</a>
            </li>
        </ul>
    </li>
</ul>

.ts file

public menuList = [
    {
        name: 'Dashboard',
        routerLink: '/dashboard',
    },
    {
        name: 'Books',
        routerLink: '/books',
        opened: false,
        submenuItems: [
            {
                name: 'submenu1',
                routerLink: '/books/submenu1'
            },
            {
                name: 'submenu2',
                routerLink: '/books/submenu2'
            }
        ]
    },
    {
        name: 'Tables',
        routerLink: '/tables',
        opened: false,
        submenuItems: [
            {
                name: 'submenu3',
                routerLink: '/tables/submenu3'
            },
            {
                name: 'submenu4',
                routerLink: '/tables/submenu4'
            }
        ]
    }
];