如何打开/关闭角度材质菜单

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. eg [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-* .

Answer 2

"Your code is correct, you don't need to write matMenuTriggerFor directive, it is part of the API, make sure you have imported the MatMenuModule, MatButtonModule, and MatIconModule into your app module." - from comments