How to toggle mat-icon in angular?

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

can you show your datasource array – Chellappan வ Sep 17 '18 at 14:58 — Chellappan வ, Sep 17 '18 at 14:58

score 13 · Accepted Answer · answered Sep 17 '18 at 13:50

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>

You have to persist the data you display in the table in some way so that it survives a reload of the page. One way to do this is to use local storage. This allows you to persist a serialized representation of the data. You can find more information here https://stackoverflow.com/questions/40589730/local-storage-in-angular-2 — DaVarga, Sep 18 '18 at 12:24

How to toggle mat-icon in angular?

1 Answers1