title: Using mat-menu as a context menu: getting the positioning right
body: <p>I'm trying to build a context menu using mat-menu, and I feel like I'm pretty close.  I want the menu to pop-up where the user right-clicks.  The problem is that it's popping up where the user last right-clicked, not where they currently right-clicked.  How do I fix this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span #contextMenuTrigger [matMenuTriggerFor]="contextMenu" class="context-menu-trigger" [style.left.px]="menuLeft" [style.top.px]="menuTop"&gt;&lt;/span&gt;
  &lt;div (contextmenu)="openContextMenu($event)&gt; stuff that I want right-click available to goes here&lt;/div&gt;
  &lt;mat-menu #contextMenu="matMenu"&gt; 
      &lt;button mat-menu-item&gt;Item 1&lt;/button&gt;
      &lt;button mat-menu-item&gt;Item 2&lt;/button&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.context-menu-trigger { position: absolute }
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>...
  @Component( ... )
  export class AppComponent {
      @ViewChild(MatMenuTrigger) public menuTrigger : MatMenuTrigger;
      public menuLeft = 0;
      public menuTop = 0;
      ...
      openContextMenu(event) {
          event.preventDefault();
          this.menuLeft = event.x;
          this.menuTop = event.y;
          this.menuTrigger.openMenu();
      }
  }
  </code></pre>
  
  <p>We are currently on @angular 4.4 and @angular/material 2.0.0-beta.12.</p>