Search code examples
angularangular-materialanchor

Angular Material Mat Menu disable matMenuTriggerFor

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:

enter image description here

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

Solution

  • The anchor tag doesn't have a disabled property so you can't disable it that way.

    You can change it to button and change its 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;
}