如何在角度中切换Mat-icon？

Question

i have multiple mat-icon (which comes dynamically) in mat-table. when i click on specific mat-icon for toggle mat-icon, it toggles all mat-icons but i want to toggle only clicked mat-icon. how to do this?

follow.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

 <ng-container matColumnDef="action">
   <th mat-header-cell *matHeaderCellDef> Follow </th>
     <td mat-cell *matCellDef="let element">
       <button mat-mini-fab color="primary" (click)="toggleIcon()"><mat-icon>{{icon}}</mat-icon></button>
    </td>
 </ng-container>
</mat-table>

follow.component.ts

  dataSource : MatTableDataSource<PeriodicElement> ;
  displayedColumns: string[] = ['username','action'];  

toggleIcon() {
  if (this.icon === 'person_add_disabled') {
    this.icon = 'person_add';
  } else {
    this.icon = 'person_add_disabled'
  }
}

this.supportService.getUsersListForFollowing({'userid':this.userid}).
  subscribe((data) => {
   if(data.status == 1){
     this.dataSource = new MatTableDataSource<PeriodicElement>(data.payload);
   }
  }
);

export interface PeriodicElement {
  username : string;
}

Answer 1

I'm not familiar with the angular material but I think you should include the disabled-information in the element itself. You can easily output the desired icon in the icon component with a ternary operator.

<td mat-cell *matCellDef="let element">
   <button mat-mini-fab color="primary" (click)="element.disabled = !element.disabled"><mat-icon>{{element.disabled ? 'person_add_disabled' : 'person_add'}}</mat-icon></button>
</td>

The following statement toggles the disabled property of your row

(click)="element.disabled = !element.disabled"

This ternary operator returns the desired string used by mat-icon

<mat-icon>{{element.disabled ? 'person_add_disabled' : 'person_add'}}</mat-icon>