How to open/close a angular-material menu

2
votes

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>
2
htmlangularangular-material
your code? what is that you have tried? – Aravind
@Aravind i'm not sure at all about how to start this. I somehow need to pass a reference of a dom element's ID to this directive which then should call the toggle() function of that dom element? – user2094257
if you can elaborate I will help you to fix this! – Aravind
@Aravind i'm just not sure at all of how to go about doing this... i've never had to write a directive that does anything like this so finding it hard to figure out the flow of the entire process. If you take a look at Aravind under examples they use a directive [matMenuTriggerFor] on a button that opens a menu, unfortunately they didn't add the directive code to the example so i'm not sure where to start. – user2094257
Sorry Take a look at material.angular.io/components/menu/overview – user2094257

2 Answers

3
votes

"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

6
votes

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