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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.