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.

If you want to do with tag add pointer-events: none; based on the condition — Sivaramakrishnan, Feb 19 '19 at 12:26

Yahya Essam · Accepted Answer · 2019-02-19T12:34:14.973

20

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;
 }

edited Feb 19 '19 at 12:34

answered Feb 19 '19 at 12:25

Yahya Essam

1,682
1
19
42

3

Just a warning, this disables ALL pointer events on the element. If you have a tooltip or another click handler for something else these will also be disabled. – Joel Duckworth Dec 11 '19 at 05:05
yes it's disabled so you don't need any tooltip or action event – Yahya Essam Dec 11 '19 at 10:53
https://stackoverflow.com/questions/46665625/how-to-combine-cursor-not-allowed-and-pointer-events-none Here's a fix for that hover/tooltip problem just in case someone needs it – Sankofa Mar 04 '22 at 14:23

score 2 · Answer 2 · answered Feb 15 '21 at 12:08

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;
    }
}

I know this is pretty old, but how would this directive be applied in the template? — ineedtoknow, Oct 21 '21 at 12:23

Angular Material Mat Menu disable matMenuTriggerFor

2 Answers2