CODEWITHSUNDEEP
angularmaterial-ui
Ashad peal
Ashad peal

Reputation: 73

How to change color of multiple rows onClick angular materialUI

I can change color of a cell when i click on showProfile(). But if I click next row the previous color disappears. How can I keep the color persistent for each time I click any row?

I have this in my HTML:

   <ng-container *ngIf="col === 'name'">
      <mat-header-cell *matHeaderCellDef> {{ col | titlecase }} </mat-header-cell>
       <mat-cell *matCellDef=" let row" 
               [ngClass]="{'data-selected': selectedRow ===row.id}" >
      <a mat-button color="primary" (click)="showProfile(row['id'], row)"
        target="_blank">{{ row[col] }}</a>
      </mat-cell>
  </ng-container>

And my CSS :

    .data-selected {
         background-color:rgb(34, 110, 34);
       }

And the TS:

    selectedRow = -1;


showProfile(id, row) {
this.selectedRow = id;
this.dialog.open(ViewProfileAdminComponent, {
  width: '1800px',
  data: {
    userId: id,
    isAdmin: true,
  },
});

} This produces the following result: Thanks in advance...

Upvotes: 0

Views: 391

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

Example Demo Because u made selectedrow only one element. You need to return it to array. Each click you should insert if not and delete if exists to array and in condition u should check if it inside it.

use

[ngClass]="{'data-selected': selectedRow.indexOf(row.id) !== -1}"

and in your component change selectedRow to array

 selectedRow=[];

then in your function

put below code

showProfile(id, row) {
     this.selectedRow.find(x=>x==id) ? this.selectedRow=this.selectedRow.filter(x=>x!=id) : this.selectedRow.push(id);

Upvotes: 1

Related Questions