Angular Material Mat Menu disable matMenuTriggerFor

Question

I have the following material menu:

<a mat-button [matMenuTriggerFor]="menu" disabled="true">Menu</a>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Notice that I have an <a> tag instead of a <button>.

I want to disable the mat menu trigger. If I use the button tag, it works, if I use it as an ancor tag, it still opens up the menu:

Any ideas how to prevent this with anchor link tags? Stackblitz example here.

Answer 1

well, the anchor tag doesn't have disabled property so you can't disable it this way.
you may change it to button and change it's style .

or you may use
pointer-events: none

to disable clicking on it.
for example :

<a mat-button [matMenuTriggerFor]="menu" [ngClass]="{ 'disabled' :condition }">Menu</a>
 <mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

and in CSS :

.disabled {
  pointer-events:none;
  opacity:.5;
 }

Answer 2

In my solution, I simply disabled click event handling by subclassing MatMenuTrigger.

import {Directive, Input} from '@angular/core';
import {MatMenuTrigger, MatMenuPanel} from '@angular/material/menu';

@Directive({
    selector: `[sgMenuTriggerFor]`,
    exportAs: 'sgMenuTrigger'
})
export class SgMenuTrigger extends MatMenuTrigger {
    _handleClick(event: MouseEvent): void {}

    @Input('sgMenuTriggerFor')
    get menu() { return super.menu; }
    set menu(menu: MatMenuPanel) {
        super.menu = menu;
    }
}