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