Add a CSS class to only one child element of the table row

Question

I need a help, I have a table, when clicking on the checkbox of a certain line, only the name of the analyst present in this line should be red, but the way I implemented when clicking on the checkbox present in a line, all names of analysts of the other lines also receive the class, I’m having difficulty to solve this problem.

Could someone help me?

table-bids-rids.component.html

<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="bidRid">
        <th mat-header-cell *matHeaderCellDef> BID/RID </th>
        <td mat-cell *matCellDef="let element">
            <mat-checkbox checked="true" (change)='onChange($event)'> {{element.bidRid}}</mat-checkbox>
        </td>
    </ng-container>
    <ng-container matColumnDef="section">
        <th mat-header-cell *matHeaderCellDef>Seção</th>
        <td mat-cell *matCellDef="let element"> 
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioOne}}"></mat-radio-button> {{element.trib}}</span>
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioTwo}}"></mat-radio-button> {{element.trab}}</span>
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioTree}}"></mat-radio-button> {{element.prev}}</span>
        </td>
    </ng-container>
    <ng-container matColumnDef="analist">
        <th mat-header-cell *matHeaderCellDef> Analista </th>
        <td mat-cell *matCellDef="let element"> 
            <span [ngClass]="{'old': toggle, 'new': !toggle}">{{element.analist}}</span>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[3, 10, 20]" showFirstLastButtons></mat-paginator>

table-bids-rids.component.scss

table{
    th.mat-header-cell{

        &:nth-child(1){
            width:25%;
        }
    }

    td.mat-cell{
        vertical-align:middle;
    }

    .hide{
        display:none;
    }

    .radio-input{
        padding:0 10px;
    }
}


.old{
    color:green;
}
.new{
    color:red;
}

table-bids-rids.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-table-bids-rids',
  templateUrl: './table-bids-rids.component.html',
  styleUrls: ['./table-bids-rids.component.scss']
})
export class TableBidsRidsComponent implements OnInit {
  displayedColumns: string[] = ['bidRid', 'section', 'analist'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

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

  toggle: boolean = true;
  isChecked:any=false;

  onChange($event:Event){
     console.log($event);
     console.log("value changed");
     this.toggle = !this.toggle;
  }
  
  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
}

export interface Element {
  bidRid: string;
  trib: string;
  trab: string;
  prev: string;
  radioOne: string,
  radioTwo: string,
  radioTree: string,
  analist: string;
}

const ELEMENT_DATA: Element[] = [
  {bidRid: 'Obrigações Não Acessórias', radioOne: '', trib: 'Tributária', radioTwo: '', trab: 'Trabalhista', radioTree: '', prev: 'Previdenciaria', analist: 'Bruce Banner'},
  {bidRid: 'Obrigações Acessórias', radioOne: '', trib: 'Tributária', radioTwo: 'hide', trab: '', radioTree: 'hide', prev: '', analist: 'Bruce Banner'},
]

Answer 1

From what we can see, the variable (toggle) that determines whether an element is marked is in the scope of the component, so it has the same value for all lines.

You must put it in the Element interface, this way it will be valid only for marked line, in the onchange event, pass the reference to the element beyond the $Event, this way you will know with which line the user is interacting.

Finally, adjust the class control in span to refer to the element field.

I hope I’ve helped.

Hugs, Bernardo Baumblatt