CODEWITHSUNDEEP
angular-materialangular5
AppDreamer
AppDreamer

Reputation: 1426

Default an Angular Material Menu to the Open state

I have a standard Angular Material Menu in a toolbar...

    <button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
    <mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
&emsp;
<mat-menu #vidmenu="matMenu">
    <button mat-menu-item>
        <img src="assets/images/vid_welcome.jpg" height=40px/>
        <span> Welcome</span>
    </button>
    <button mat-menu-item>
            <img src="assets/images/vid_video1.jpg" height=40px/>
            <span>Video 1</span>
        </button>
    <button mat-menu-item>
        <img src="assets/images/vid_video2.jpg" height=40px/>
        <span>Video 2</span>
    </button>
</mat-menu>

In testing, users are not seeing the material menu icon no matter how large we make it. One user suggested we start the experience off with the menu open... that way they can see the choices, click on one, and the menu closes. Then they will know it's there for future use.

I have researched remotely triggering the click() to open it on during ngOnInit(), but all examples are in older angular versions, and even if I got it working, I'm guessing it will be buggy.

Is there a way to simply set a menu to a default state of being "open", and then just function normally from there?

Upvotes: 7

Views: 1657

Answers (1)

Wynand
Wynand

Reputation: 61

Ensure you are using the following directive on the button which is used as the menu trigger on the UI.

<button
[matMenuTriggerFor]="menu">
</button>

<mat-menu #menu="matMenu">
...
</mat-menu>

Then in the .ts code of your component, ensure you have the following import:

import { MatMenuTrigger } from "@angular/material/menu"

Create the following property:

@ViewChild(MatMenuTrigger) adjustersMenuTrigger: MatMenuTrigger

Then finally to open the menu programmatically, use the following code:

this.adjustersMenuTrigger.openMenu()

Upvotes: 1

Related Questions