How to make mat-icon disabled in angular?
Use ngClass directive to add disable
<mat-icon color="warn" [ngClass]="{'disable':payloadArray.enabled !== true}"(click)="onClick()">delete</mat-icon>
Example:https://stackblitz.com/edit/angular-4jdvc9
it's all post but what about two mat-icon?
<mat-icon *ngIf="payloadArray.enabled == 'true'"
color="warn" style="cursor: pointer;">
delete
</mat-icon>
<mat-icon *ngIf="payloadArray.enabled != 'true'"
"color="warn" style="opacity:.5">
delete
</mat-icon>
Use mat-icon
inside button tag and then you can use disabled
Try this,
<button mat-icon-button [disabled]="payloadArray.enabled != 'true' " color="primary" >
<mat-icon color="warn" style="cursor: pointer;" >delete</mat-icon>
</button>
Although late at the party I figured out the following CSS with [ngClass]="{'disable':condition...}"
.disable:hover{
cursor: not-allowed;
}
.disable:active{
pointer-events: none;
}
mat-icon.disable {
filter:opacity(0.5);
}