如何在 angular 中禁用 mat-icon？

Question

Here i have multiple mat-icons, delete named mat-icon i want to make disabled i use disabled properties on this but it gives error like(Can't bind to 'disabled' since it isn't a known property of 'mat-icon') so how to show particular mat-icon disabled in angular 6?

<mat-icon color="warn" style="cursor: pointer;" [disabled]="payloadArray.enabled != 'true' ">delete</mat-icon>
<mat-icon color="warn" style="cursor: pointer;">person_add</mat-icon>

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

I've found the source of this issue: Make sure that this line exists at your component code (mock.component.ts):

import { MatButtonModule } from "@angular/material/button";`

And these lines present at your app module loader (app.module.ts):

import { MatButtonModule } from '@angular/material/button';
@NgModule({
  imports: [
    MatButtonModule
  ],
  *etc...*
})

PS: I had the same issue with <mat-button/> - the similar fix should work with <math-icon/> as well, but you need to use the name of your component instead of the button there.

Answer 6

Here, You need to change use mat-icon inside the button

<button mat-icon color="warn" style="cursor: pointer;"[disabled]="payloadArray.enabled != 'true' ">delete