Custom context menu in Angular

Question

I'm trying to create a --seemingly simple-- thing - I would like to be able to create a custom context menu that displays an "X," as a delete option for some elements on my page. Ideally, I would use an external library for this functionality instead of writing another component myself, as I'm attempting to keep this project down to one component file (for reasons I don't have time to put in this question).

I have tried what seems like the perfect library already: https://github.com/isaacplmann/ngx-contextmenu, but it has not worked as intended.

The menu simply appears broken an unusuable, like so:

The (execute) event attached to the X never fires, and the menu clearly does not display as intended. If anyone has some insight into why this isn't working, this is the code I am currently using:

The element the menu is attached to:

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

The menu itself:

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

The print function (just a log to the console)

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

This ngx-context-menu component doesn't seem like it has a ton of support, so I'm interested in trying other methods. So my questions for you all are:

1) Do you know of any other custom-menu component libraries that will work well for this purpose?

OR

2) Do you know how to change the the Angular Material md-menu trigger to right-click instead of left-click? (which would allow me to use Angular Material's md-menu in this situation?)

Thanks! Lars

I do not know the library, however have you tried to bind the output to a function declared in the component? — LookForAngular
– LookForAngular, Commented Jul 20, 2017 at 18:37
if you're referring to the (execute) event that is attached to the contextMenuItem, then yes. It seems like the event is properly bound, but the list is broken in a way that it never catches the click on the menu item. — LarsMonty
– LarsMonty, Commented Jul 20, 2017 at 18:44

Karsten · Accepted Answer · 2017-07-20 19:49:54Z

1

With this code (execute)="console.log('click')" your handler will not work, because in templates, you only have the template scope available (not the global scope, but console is in global scope)
So you would need to call a function from your component like
(execute)="functionFromComponent('click')"

As for angular material: you could add a manual trigger in this way:

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

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

And then bind someMethod() to a normal click event (and filter out the right-button clicks)

See also: https://material.angular.io/components/menu/overview

edited Jul 20, 2017 at 19:49

answered Jul 20, 2017 at 19:05

Karsten

3891 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

LarsMonty Over a year ago

You are right, was a faulty example. I have edited the question, and the behavior persists. It would have given me an error if it had tried to call the console.log anyways, but it never did, because the (execute) event is never called.

Karsten Over a year ago

Added a suggestion for angular material

LarsMonty Over a year ago

Awesome, thanks! Dunno how I missed that in the docs. That works great for binding the openMenu function to a right-click. However, I have one more question before accepting -- in the docs, it says "Please note that in this case, an mdMenuTriggerFor directive is still necessary to attach the menu to a trigger element in the DOM." Meaning, I still need to bind the mdMenuTriggerFor, which defaults to left-click (and my menu pops up on left click AND right click). Do you know how to finagle it so the menu will not open on left click, ONLY right clicks?

Karsten Over a year ago

It should work by preventing the default. So on catching the click event you say: (click)="someMethod($event)" And then in someMethod you say: someMethod(event:MouseEvent){event.preventDefault(); event.stopImmediatePropagation(); event.cancleBubble=true;}

LarsMonty Over a year ago

That particular code doesn't seem to work but I will play around with it. Thanks!

|

Collectives™ on Stack Overflow

Custom context menu in Angular

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related