Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

460
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda