Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

457
Vistas
Open the context menu by PrimeNG from code Angular 2

I need to open the context menu by PrimeNG in table using button and using the right click. I found the method 'toggle' and 'show' into component for open the menu, but it's not open. When I call the method, I setting new position for menu, but a property 'display' still has a 'none', but with a new position. For getting a component 'contextMenu' from template in typescript, I use ViewChild by Angular.

about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Add a context menu and a click event on a button/span/div/etc that references the local variable (cm in this example) and calls the show or toggle function.

<p-contextMenu #cm [model]="items"></p-contextMenu>

<button (click)="cm.show($event);$event.stopPropagation();">Show context</button>

Feel free to pass this to a function which will handle it:

(click)="showContext(cm, $event)"

In the TS:

showContext(cm: ContextMenu, event :MouseEvent) {
  cm.show(event);
  event.stopPropagation();
}

The most important thing that seems to be necessary (at least on PrimeNG 7) is the event.stopPropagation(). Without it, if you view the DOM, you will see the context menu reacting to the show() event but the display stays as none.

The other important thing is passing the mouse event in the show() which lets the context menu appear where your cursor is, otherwise it appears elsewhere on the page.

If attempting to call the show/toggle purely through code and using the ViewChild without a click event happening, you can try to manually edit the style and change the display:none to a display:block (as detailed in the comment by Y. Tarion)

about 4 years ago · Santiago Trujillo Denunciar

0

You can open programmatically a contextMenu PrimeNG but it's a little tricky.

Your ContextMenu in your template :

<p-contextMenu #cm [global]="true" [model]="items"></p-contextMenu>

On your button : (click)="toggle($event)"

On your typescript, here an example of the toggle method :

  toggle(event){
    if(!this.cm.containerViewChild.nativeElement.style.display ||
      this.cm.containerViewChild.nativeElement.style.display == 'none') {
      //Open contextual menu
      setTimeout(() => {
        this.cm.position(event);
        this.cm.containerViewChild.nativeElement.style.display = 'block';
        this.cm.containerViewChild.nativeElement.style.visiblility = 'visible';
      }, 0);
    }else{
      //close contextual menu
      setTimeout(() => {
        this.cm.containerViewChild.nativeElement.style.display = 'none';
      }, 0);
    }
  }

Where cm is your ContextMenu

@ViewChild("cm") cm:ContextMenu;

Or, it exists an alternative from the ContextMenu for this use case : the PrimeNG's tiered menu

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda