title: Fluent context menu behavior using Angular Material Menu?
body: <p>I am trying to use mat-menu as a context menu. I can open the menu when right-clicked on a view. The code is as follows.</p>
  <p>Template:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!-- The context trigger view. (The actual view) --&gt;
      &lt;div (contextmenu)=&quot;onContext($event)&quot;&gt;
          Content here
      &lt;/div&gt;
  
      &lt;!-- The hidden view that menu originates from --&gt;
      &lt;div style=&quot;visibility: hidden; position: fixed;&quot;
           [style.left]=&quot;contextPosition.x&quot;
           [style.top]=&quot;contextPosition.y&quot;
           #contextTrigger
           [matMenuTriggerFor]=&quot;contextMenu&quot;&gt;&lt;/div&gt;
  
      &lt;!-- The menu iteself --&gt;
      &lt;mat-menu #contextMenu=&quot;matMenu&quot; [hasBackdrop]=&quot;true&quot;&gt;
        &lt;ng-template matMenuContent&gt;
          &lt;button mat-menu-item&gt;Move&lt;/button&gt;
          &lt;button mat-menu-item&gt;Rename&lt;/button&gt;
        &lt;/ng-template&gt;
      &lt;/mat-menu&gt;
  </code></pre>
  <p>Component:</p>
  <pre class="lang-js prettyprint-override"><code>    contextPosition = { x: '0', y: '0' }
  
      @ViewChild('contextTrigger', { read: MatMenuTrigger })
      protected contextTrigger: MatMenuTrigger;
  
      onContext(event: MouseEvent) {
        event.preventDefault();
  
        // Save location
        this.contextPosition.x = event.clientX + 'px';
        this.contextPosition.y = event.clientY + 'px';
  
        // Open menu
        this.contextTrigger.openMenu();
      }
  </code></pre>
  <h3><a href="https://stackblitz.com/edit/angular-ivy-qc2d33?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz</a></h3>
  <p>I am trying to achieve fluent context menu behavior, similar to what many programs have. How can I achieve it?</p>
  <p><a href="https://youtu.be/eaGHfF8Ntlo" rel="nofollow noreferrer">The behavior with backdrop</a> - <a href="https://youtu.be/zpEY4_WTSWI" rel="nofollow noreferrer">The behavior without backdrop</a> - <a href="https://youtu.be/VyPYgqhpTl0" rel="nofollow noreferrer">The behavior I want</a></p>
  <p>Additionally, I tried using <a href="https://www.npmjs.com/package/ngx-contextmenu" rel="nofollow noreferrer">this</a> and <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-navigations" rel="nofollow noreferrer">this</a> packages. However, each has its own problems. Currently, I prefer the Material Menu component if I can make it work.</p>