Utilizing stopPropagation in an Angular action menu: A beginner's guide

Question

Utilizing stopPropagation in an Angular action menu: A beginner's guide

I'm currently troubleshooting an issue within my accordion setup.

Here's the 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 my TypeScript file, I have the following code:

 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(); // Although used, it doesn't prevent accordion display as intended
    return [
      {
        label: '',
        icon: '',
        command: () =>
          this.router.navigate(/aaa)
      }
    ];
  }

The issue arises when clicking the action menu. All I want is for the action menu to open without affecting the accordion. How can I achieve this?

https://i.sstatic.net/oCoyg.png https://i.sstatic.net/UOPDY.png

angular typescript stoppropagation

Answer 1

Answer №1

Here is a helpful tip:

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

Additionally, it is important to note that you are passing the $event parameter to the .toggle() function, but this does not have any effect on your code.

You can create a function in your .ts file and call it from your .html file instead.

For example:

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();
}

Answer 2

Here is a helpful tip:

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

Additionally, it is important to note that you are passing the $event parameter to the .toggle() function, but this does not have any effect on your code.

You can create a function in your .ts file and call it from your .html file instead.

For example:

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();
}

Utilizing stopPropagation in an Angular action menu: A beginner's guide

Answer №1

Similar questions

Angular - Sweetalrt2 automatically takes action before I even have a chance to press OK

Angular: How can I apply animation to rotate an image within a component?

Launch a TypeScript Node.js server on Heroku deployment platform

A step-by-step guide on dynamically altering button colors in Angular 2

The submission of an Angular form results in errors such as being unavailable or

Is it possible to use null and Infinity interchangeably in JavaScript?

The issue arises when using NextJs 14 and useContext, as it throws an error despite having the

Incorporating a binding using [(ngModel)] into a component element

Angular development build fails to start, but the production build successfully runs

The 'children' property is not found in the type 'ColDef<object>' in <AG-Grid>

A guide to implementing "Intl.DateTimeFormat" within a Next.js React component

The Angular map function is throwing an error stating "undefined is not a function"

Can we define the input and return types for functions using httpsCallables?

Change the default parameter value when optional parameters are present

Angular - Ensuring the Independence of Field Pairs During Validation

What could be causing the issue with dayjs dynamic importing in TypeScript?

Examined unexplored branch that is a component of the OR condition

Experimenting with a feature that relies on context

Having trouble running Jest tests with three objects in my Vite Vue TypeScript project

Creating a dynamic number of properties with different names in Typescript can be achieved by using a loop