How to highlight multiple selected row in angular 4

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>

This is just a snap of my code. I am looking for the logic to highlight multiple row. — Nawab Ahmad, Sep 11 '17 at 05:37
Then my friend there are plenty of Questions available on SO and on Google as well. Haven't you checked that? https://stackoverflow.com/questions/35167463/angular2-how-bind-to-select-multiple — The Hungry Dictator, Sep 11 '17 at 06:25
Possible duplicate of [Angular2: how bind to select multiple](https://stackoverflow.com/questions/35167463/angular2-how-bind-to-select-multiple) — The Hungry Dictator, Sep 11 '17 at 06:25

score 1 · Answer 1 · answered Sep 11 '17 at 09:44

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

answered Sep 11 '17 at 09:44

Sheik Althaf

1,595
10
16

score 0 · Answer 2 · edited Dec 10 '18 at 10:49

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 {
}

score 0 · Answer 3 · answered Dec 10 '18 at 10:45

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);
}

}

You can [edit](https://stackoverflow.com/posts/53703971/edit) your original answer instead adding to a new one — Suraj Rao, Dec 10 '18 at 10:51

score -1 · Answer 4 · answered Sep 11 '17 at 06:50

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>

How to highlight multiple selected row in angular 4

4 Answers4