title: Use Angular Material 2 menu as contextual menu on list items
body: <p>I am trying to show a contextual menu when the user right-clicks an item in a list of alarms. The problem is I need to use the directive <code>mdMenuTriggerFor</code> to be able to call <code>openMenu()</code> from the component. But this directive is intended to work on left-click, so the menu is always shown (left &amp; right click). Also, on right click, the menu is displayed at the top of the list.</p>
  
  <p>My code looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="list"&gt;
      &lt;div *ngFor="let alarm of (_alarms | alarmsFilter:search.value)"&gt;
          &lt;alarm-item [alarm]="alarm" (onClick)="onSelection(alarm)" (contextmenu)="onContextMenu($event, alarm)" [mdMenuTriggerFor]="appMenu"&gt;&lt;/alarm-item&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;md-menu #appMenu="mdMenu"&gt;
      &lt;!-- Menu content --&gt;
  &lt;/md-menu&gt;
  </code></pre>
  
  <p>And my component typescript file looks like this: </p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      selector: // My selector
      templateUrl: // My template URL
  })
  export class AlarmComponent {
      @Input() alarm;
      @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
  
      // ...
  
      private onContextMenu($event: Event, alarm: Alarm): void {        
          this.trigger.openMenu();
  
          $event.preventDefault();
      }
  </code></pre>
  
  <p>Any suggestions?</p>