How to use stopPropagation inside action menu, using angular

Question

I need to fix a bug in my accordion.

HTML:

                     <p-menu
                      #menu
                      [popup]="true"
                      [model]="menusMap[item.id]"
                    ></p-menu>
                    <button
                      pButton
                      class="p-button-text"
                      icon="pi pi-ellipsis-h"
                      (click)="menu.toggle($event)"
                    ></button>

In ts I have:

 menusMap: Record<string, MenuItem[]> = {};
  e!: Event;

   function(){
      ......
        if (page.list) {
            const items = page.list;
            this.menusMap = {};
            items .forEach((item) => {
              this.menusMap[item.id] = this.createMenuList(item);
            });
          }
  }

  createMenuList(item: Items): MenuItem[] {
    this.e.stopPropagation();  // I used this but doesn't work. Only blocks the list display
    return [
      {
        label: '',
        icon: '',
        command: () =>
          this.router.navigate(/aaa)
      }
    ];
  }

My problem is, when click action menu I needn't to open accordion. I need to open only action menu, not accordion.

Answer 1

You can use this trick:

<button
    pButton
    class="p-button-text"
    icon="pi pi-ellipsis-h"
    (click)="$event.stopPropagation(); menu.toggle()"
></button>

But in addition I have to say that you passed the $event to the .toggle() function which is not belong to yor cose and passing that will not change anything.

You could implement a function in your .ts and call it in your .html file.

Like this:

HTML:

<button
    pButton
    class="p-button-text"
    icon="pi pi-ellipsis-h"
    (click)="toggleMenu($event, menu)"
></button>

TS:

public toggleMenu(ev, menuRef) {
    ev.stopPropagation();
    menuRef.toggle();
}