How to open mat-menu programmatically?

You need to get hold of MatMenuTrigger instance from [matMenuTriggerFor] element

#menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu"

where

• #menuTrigger is the template reference variable

• matMenuTrigger is exportAs property of MatMenuTrigger metadata

and then simply call

(click)="menuTrigger.openMenu()"

Stackblitz example

Read more about template reference variable here

• What is #auto attribute here and why it is required

You can also control the <mat-menu> directly in the code.Here is an example:

import { Component, ViewChild } from '@angular/core';import { MatMenuTrigger } from '@angular/material/menu';...export class LanguageComponent {  @ViewChild('languageMenuTrigger') languageMenuTrigger: MatMenuTrigger;    ...  openMenu() {    this.languageMenuTrigger.openMenu();  }    closeMenu() {    this.languageMenuTrigger.closeMenu();  }}

<button  mat-button  [matMenuTriggerFor]="languageMenu"  #languageMenuTrigger="matMenuTrigger">  Language  <mat-icon>expand_more</mat-icon></button><mat-menu #languageMenu="matMenu">  <button    mat-menu-item>    English  </button>  <button    mat-menu-item>    Français  </button></mat-menu>