title: How to open/close a angular-material menu
body: <p>I recently started using angular-material and am struggling/unsure about opening/closing a mat-menu...  I see in the examples on the angular-material documentation site that they assign an id to the menu and then apply a directive to the button that is used to toggle the menu. e.g. <code>[matMenuTriggerFor]="menu"</code></p>
  
  <p>How can I go about writing a directive that does that?  I'm not sure how to pass a reference to a specific menu to a directive that then calls the <code>toggle()</code> method on the DOM element with that id?</p>
  
  <p>The following code produces the errors:    </p>
  
  <blockquote>
    <p>Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.</p>
  </blockquote>
  
  <p>There is no directive with "exportAs" set to "matMenu".<br>
  My code:</p>
  
  <pre><code>&lt;li&gt;
      &lt;button mat-icon-button [matMenuTriggerFor]="stockSystemMenu"&gt;
          &lt;mat-icon class="sn-item"&gt;
              &lt;i class="material-icons"&gt;archive&lt;/i&gt;
          &lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;span class="sn-item" (click)="toggleMenu(stockSystemMenu)"&gt;Stok System&lt;/span&gt;
  
      &lt;mat-menu #stockSystemMenu="matMenu"&gt;
          &lt;button mat-menu-item&gt;
              &lt;mat-icon&gt;
                  &lt;i class="material-icons"&gt;chevron_right&lt;/i&gt;
              &lt;/mat-icon&gt;
          &lt;span&gt;Service 1&lt;/span&gt;
          &lt;/button&gt;
      &lt;/mat-menu&gt;
  &lt;/li&gt;
  </code></pre>