How to highlight multiple selected row in angular 4 - html

Question

How to highlight multiple selected row in angular 4 ,
Here I can edit with checkbox and perform other action too. What I am looking is to highlight the row which is checked.
<tbody>
<tr *ngFor='let row of rowData' [ngClass]="{ 'selected': row.selected }">
<td class="text-center>
<input type="checkbox" [(ngModel)]="row.selected" />
</td>
<td>
<input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
<ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
<!-- You can use span or whatever instead of ng-container-->
</td>
<!-- Repeat for other cells -->
</tr>
</tbody>

Answer 1

It is dead simple simply use angular class directive
<tr *ngFor='let row of rowData' [class.selected]="row.selected">
Now it will add class selected when row.selected is true to the row

Answer 2

To highlight a row, you need to highlight the cells (<td>). From what I know, you can't highlight a row.
Here is the logic :
<tbody>
<tr *ngFor='let row of rowData'>
<td class="text-center" [class.selected]="row.selected">
<input type="checkbox" [(ngModel)]="row.selected" />
</td>
<td [class.selected]="row.selected">
<input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
<ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
<!-- You can use span or whatever instead of ng-container-->
</td>
<!-- Repeat for other cells -->
</tr>
</tbody>

Answer 3

HTML :
<tr *ngFor="let record of mf.data; let i = index" [attr.data-index]="i" [className]=" selectedAll==true || selectedRow.indexOf(i)>-1 ?
'pointer selected' : 'pointer'">
<td class=" text-left" width="20">
<input type="checkbox" (change)="selectAll(i)" [checked]="selectedAll == true">
</td>
...
</tr>
TS :
export class YourComponent implements OnInit {
selectedRow: any;
selectedAll: boolean = false;
constructor(){
this.selectedRow = [];
}
selectAll(index) {
if (typeof (index) == 'undefined') {
this.selectedAll = !this.selectedAll;
this.selectedRow = [];
} else {
this.selectedRow.push(index);
}
}

Answer 4

HTML :
<tr *ngFor="let record of mf.data; let i = index" [attr.data-index]="i" [className]=" selectedAll==true || selectedRow.indexOf(i)>-1 ?
'pointer selected' : 'pointer'">
<td class=" text-left" width="20">
<input type="checkbox" (change)="selectAll(i)" [checked]="selectedAll == true">
</td>
...
</tr>
TS :
export class YourComponent implements OnInit {
}