Alternate the Angular material icon by clicking

Question

I have a material table, in which there is a column called status (see the image)

What I need is by clicking on the material icon, the icon should be alternate depending on the value set from the 'ts' file. I am using a public variable to change the icon. However, as I am using only one variable, the effect is taking place for all the rows. Moreover, if I control it with the id of the clicked item, the previous clicked values (icons) are replaced by the old values (icons). For your information, I am showing and saving data through observable (API). So no way to take the value from API and show it instantly in the list. Bellow is the code of the both HTML and 'ts':

onClick(event, row) {
  if (event.srcElement.innerText === 'panorama_fish_eye') {
      this.statusIconTextTrue = 'check_circle';
      taskStatus = 'FINISHED_COMPLETED';
      archived = true;
      timeFinishedActual = new Date().getTime();
    } else {
      this.statusIconTextTrue = 'panorama_fish_eye';
      taskStatus = 'CREATED';
      archived = false;
      timeFinishedActual = null;
    }
}

<mat-icon (click)="onClick($event, element)">
                  {{ statusIconID == element.taskuuid && statusIconTextTrue ? statusIconTextTrue : statusIconText  }}
                </mat-icon>

I am struggling for couple of days to put the right logic to cope with issue. Any thoughts on this or may be some other solutions? Thanks in advance.

Answer 1

Yasir, use the value of "status". The click only change the status, see stackblitz

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=!element.status" mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>

If "status" is not in the data you received, you can add easy after subscribe to the service. Imagine you has a service that return an array of data with an unique property date, you can make something like

dataService.subscribe((res:any)=>{
   res.forEach(x=>{
      x.status=false;
   })
   this.data=res
})

NOTE: in the eg the status has only two values "true" and "false", it's the reason that the click becomes so easy like (click)="element.status=.element.status" can be has two values 'finish' and 'unfinish' then the column becomes like

<ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td (click)="element.status=element.status=='finish'?'unfinish':'finish'
        mat-cell *matCellDef="let element">
        <mat-icon>
            {{ element.status=='finish'?'check_circle' : 'block'  }}
        </mat-icon>
    </td>
</ng-container>