Angular Material Mat Menu disable matMenuTriggerFor

Issue

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.

Solution

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

Answered By - Yahya Essam