How to open/close a angular-material menu

Question

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. [matMenuTriggerFor]="menu"

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 toggle() method on the DOM element with that id?

The following code produces the errors:

Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.

There is no directive with "exportAs" set to "matMenu".
My code:

<li>
    <button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
        <mat-icon class="sn-item">
            <i class="material-icons">archive</i>
        </mat-icon>
    </button>
    <span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>

    <mat-menu #stockSystemMenu="matMenu">
        <button mat-menu-item>
            <mat-icon>
                <i class="material-icons">chevron_right</i>
            </mat-icon>
        <span>Service 1</span>
        </button>
    </mat-menu>
</li>

Answer 1

There is confusion because Material introduced a breaking change as I understand it.. See material 2 Changelog - Breaking Changes

Starting with Material 2.0.0-beta.12. Use mat instead of md-*.. Seems only some of the docs at material.angular.io are updated with mat. Specifically, if you click view source and see md, I believe they have yet to replace it with mat.

So either update to Material 2.0.0-beta.12 and use mat-*, or use md-*.