title: Custom context menu in Angular
body: <p>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).</p>
  
  <p>I have tried what seems like the perfect library already: <a href="https://github.com/isaacplmann/ngx-contextmenu" rel="nofollow noreferrer">https://github.com/isaacplmann/ngx-contextmenu</a>, but it has not worked as intended.</p>
  
  <p>The menu simply appears broken an unusuable, like so:
  <a href="https://i.stack.imgur.com/pQS8Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pQS8Q.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <p>The element the menu is attached to:</p>
  
  <pre><code>&lt;div 
      id="playhead"
      (mousedown)="movePlayheadByMouse()"
      [contextMenu]="deleteMenu"
  &gt;
       &lt;span id="playhead-top"&gt;&amp;#9930;&lt;/span&gt;
       &lt;div id="playhead-line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The menu itself:</p>
  
  <pre><code>&lt;context-menu #deleteMenu&gt;
      &lt;ng-template contextMenuItem (execute)="print('click')"&gt;X&lt;/ng-template&gt;
  &lt;/context-menu&gt;
  </code></pre>
  
  <p>The print function (just a log to the console)</p>
  
  <pre><code>private print(val : string) : void
  {
    console.log(val)
  }
  </code></pre>
  
  <p>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:</p>
  
  <p>1) Do you know of any other custom-menu component libraries that will work well for this purpose?</p>
  
  <p>OR</p>
  
  <p>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?)</p>
  
  <p>Thanks!
  Lars</p>