How to add a class to a whole table row in angular - css

Question

table with a tr in it. Now I would like if you click on that table row the backgroundcolor changes. Why I want this is because I am using a tree table to open up this table row. And I would like it if you click on this table row that the background color of the whole row changes. Now if I close this table row (by clicking on it again) I would like that the backgroundcolor goes back to normal
<ng-template pTemplate="header">
<tr>
<th>Bedrijsnaam</th>
<th>Bedrijfstype</th>
<th>Status</th>
<th>Bank</th>
</tr>
</ng-template>
This is the tr I am talking about. I tried using ng-class but without any luck. Does someone know how to do this?

Answer 1

You can use (click) and [ngClass] on the tr.
Ex :
<tr (click)="toggleClass()" [ngClass]="{active: className}">
....
</tr>
in ts
let className = "";
toggleClass(){
if(this.className === "active"){
this.className = ""
}else{
this.className = "active";
}
}
in csss
.active{
background-color: yellow;
}
Note this implemenation is for one tr you may need to attach this className for each row.

Answer 2

This another solution and you don't need to create a property in the component
<tr #tr (click)="tr.classList.toggle('active')" >
....
</tr>
demo

Answer 3

Table.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
tableRowClicked = false;
toggleTableRowClicked() {
this.tableRowClicked = !this.tableRowClicked;
}
}
Create an instance variable tableRowClicked to manage whether the table row has been clicked or not.
Create a toggle function to toggle the variable true or false.
Table.component.html
<div>
<table>
<tr (click)="toggleTableRowClicked()" [class.table__row--clicked]="tableRowClicked">
<th>Bedrijsnaam</th>
<th>Bedrijfstype</th>
<th>Status</th>
<th>Bank</th>
</tr>
</table>
</div>
Invoke the toggle function using the click handler on the <tr>
Apply the table__row--clicked class when tableRowClicked=true
Table.component.css
.table {
&__row {
&--clicked {
background-color: red;
}
}
}
CSS to make the background-color: red; when the tableRowClicked = true