click material row specific column angular 8

Question

Currently I am working on Material table where i have to make a row as a favorite by clicking favorite icon (separate column) when I click star icon this was changing for all row instead of changing for single column.

I was trying to apply based on the UserID

Here is my HTML Code

<mat-table [dataSource]="dataSource" matTableExporter matSort class="mat-elevation-z8" #exporter="matTableExporter">
    <ng-container matColumnDef="customColumn">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let dashdata">   
        <span class="icon"  *ngIf="dashdata.status === 'Data Load Pending'">
          <i class="far fa-times-circle"></i>
      </span>
      <span class="icon" (click)="onClick()" *ngIf="dashdata.status === 'Pending' || 
                   dashdata.status === 'Approved' || 
                   dashdata.status === 'No Forecast'">
          <i class="fas fa-star" [ngClass]="{'active': isActive}"></i>
    </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="UserId">
      <mat-header-cell *matHeaderCellDef mat-sort-header> UserId </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.UserId}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="FName">
      <mat-header-cell *matHeaderCellDef mat-sort-header> First Name</mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.FName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Lname">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Lname}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Salary">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Salary </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.Salary}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastUpdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Last Update </mat-header-cell>
      <mat-cell *matCellDef="let dashdata"> {{dashdata.lastUpdate}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let dashdata">
        <span *ngIf="dashdata.status === 'Pending'">
          <mat-icon> email</mat-icon>
      </span>
      <span class="icon" *ngIf="dashdata.status === 'Approved' || 
                   dashdata.status === 'Not Approved'">
         <mat-icon>edit</mat-icon>
      </span>
      </mat-cell>
    </ng-container>
    <!-- Header row first group -->

    <mat-header-row *matHeaderRowDef="foreCastColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: foreCastColumns;"></mat-row>

  </mat-table>
  <mat-paginator [pageSizeOptions]="[10, 25, 100]" showFirstLastButtons></mat-paginator>

Here is my ts Code

        import { Component, ViewChild, OnInit } from '@angular/core';
    import { ApiService } from '../../../core/_base/layout/services/mydash.service';
    //import { LayoutConfigService } from './core/_base/layout';
    import {MatPaginator} from '@angular/material';
    import {MatSort} from '@angular/material';
    import { MatTableDataSource } from '@angular/material';
    // import { FormControl } from '@angular/forms';



    @Component({
      selector: 'kt-my-page',
      templateUrl: './my-page.component.html',
      styleUrls: ['./my-page.component.scss']
    })



    export class MyPageComponent implements OnInit  {

      public isActive:boolean = false;


      @ViewChild(MatSort,{static:true}) sort: MatSort;
      @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

      dashboard:string;
      foreCastColumns : string[] = ['UserId','FName', 'Lname', 'sponsor','Salary','lastUpdate','action'];
      dataSource;
      dateField:number = Date.now();



      applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        console.log(this.dataSource.filter);
      }

      constructor(private  dataService:  ApiService) {}

      ngOnInit(): void {         

          this.dataService.getdashData().subscribe((response )=>{
          this.dataSource = new MatTableDataSource(response['studies']);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort; 
        })   
    }

    onClick(){
      this.isActive = !this.isActive;
    }

    }

This is what I am trying to active row or inactive

    onClick(){
      this.isActive = !this.isActive;
    }

Here is my SCSS

    .fas{
        font-size: large;
    }
    .fas fa-star{
        background-color:blue;
    } 
    .fa-star.active{
        color:grey;
    }  

Answer 1

you can have the function wich will be take the row data as argument and store the UserId instead of isActive property.

something like this

in component.ts

favoriteUserId = null;

onClick(row) {
   this.favoriteUserId = row.UserId
}

in template

please replace your span block with this

<span class="icon" (click)="onClick(dashdata)" *ngIf="dashdata.status === 'Pending' || dashdata.status === 'Approved' || dashdata.status === 'No Forecast'">
    <i class="fas fa-star" [ngClass]="{'active': dashdata.UserId === favoriteUserId}"></i>
</span>

And one more thing too,

you can use ngIfElse instead of two ngIf

elseBlock will be display, when your condition(dashdata.status === 'Data Load Pending') returns false

more about it https://angular.io/api/common/NgIf#ngIfElse

<ng-container matColumnDef="customColumn">
   <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let dashdata">   
        <span class="icon"  *ngIf="dashdata.status === 'Data Load Pending'; else elseBlock">
          <i class="far fa-times-circle"></i>
      </span>
   <ng-template #elseBlock>
     <span class="icon" (click)="onClick(dashdata)">
          <i class="fas fa-star" [ngClass]="{'active': dashdata.UserId === favoriteUserId}"></i>
     </span>
   </ng-template>

  </mat-cell>
</ng-container>