CODEWITHSUNDEEP
htmlangularangular-material
user2094257
user2094257

Reputation: 1715

How to open/close a angular-material menu

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>

Upvotes: 2

Views: 10694

Answers (2)

Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

"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

Upvotes: 3

ttugates
ttugates

Reputation: 6311

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

Upvotes: 6

Related Questions