Menu contextuel personnalisé dans Angular

Question

J'essaie de créer une chose - quoique simple - je voudrais être capable de créer un menu contextuel personnalisé qui affiche un «X», comme une option de suppression pour certains éléments sur ma page. Idéalement, j'utiliserais une bibliothèque externe pour cette fonctionnalité au lieu d'écrire moi-même un autre composant, car je tente de garder ce projet à un seul composant (pour des raisons que je n'ai pas le temps de poser).

J'ai déjà essayé ce qui semble être la bibliothèque parfaite: https://github.com/isaacplmann/ngx-contextmenu, mais cela n'a pas fonctionné comme prévu.

Le menu apparaît simplement cassé une unusuable, comme ceci:

L'événement (execute) attaché aux feux X jamais, et le menu ne clairement affiche pas comme prévu. Si quelqu'un a une idée de pourquoi cela ne fonctionne pas, c'est le code que je suis actuellement en utilisant:

L'élément du menu est fixé à:

<div 
    id="playhead" 
    (mousedown)="movePlayheadByMouse()" 
    [contextMenu]="deleteMenu" 
> 
    <span id="playhead-top">&#9930;</span> 
    <div id="playhead-line"></div> 
</div> 

Le menu lui-même:

<context-menu #deleteMenu> 
    <ng-template contextMenuItem (execute)="print('click')">X</ng-template> 
</context-menu> 

la fonction d'impression (juste un journal à la console)

private print(val : string) : void 
{ 
    console.log(val) 
} 

Ce composant NGX-menu contextuel ne le fait pas semble avoir beaucoup de soutien, donc je suis intéressé par d'autres méthodes. Donc, mes questions pour vous tous sont:

1) Connaissez-vous d'autres bibliothèques de composants de menu personnalisé qui fonctionneront bien dans ce but?

OU

2) Savez-vous comment changer le déclencheur MD-menu Matériel angulaire à un clic droit au lieu de clic gauche? (ce qui me permettrait d'utiliser le menu md d'Angular Material dans cette situation?)

Merci! Lars

Answer 1

Avec ce code (execute)="console.log('click')" votre gestionnaire ne fonctionnera pas, parce que dans les modèles, vous avez seulement le champ d'application de modèle disponible (et non la portée globale, mais console est portée mondiale)
donc vous auriez besoin d'appeler une fonction de votre composant comme
(execute)="functionFromComponent('click')"

en ce qui concerne la matière angulaire: vous pouvez ajouter un déclencheur manuel ainsi:

class MyComponent { 
    @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; 

    someMethod() { 
    this.trigger.openMenu(); 
    } 
} 

et e en liaison someMethod() à un événement click normal (et filtrer les clics droit bouton)

Voir aussi: https://material.angular.io/components/menu/overview