How to manipulate HTML elements in Angular2

Question

Let's say I have this table:

I'd like to check the top checkbox and have all them checked, or uncheck it then have all of them unchecked.

In JQuery, something like this:

$("#mytable tbody :checkbox").prop('checked', true);

You can also find a checkbox and applied change to it.

I just don't see how to establish 2-ways binding with those checkboxex as they are dynamically constructed.

<tr *ngFor="let tRow of initConsView.bodyData">
  <td *ngFor="let col of tRow">
    <input *ngIf="col.key == 'Id'" 
            type="checkbox" [attr.id]="'ck_' + col.value"                                                        
            (change)="onChecked($event, col.value)" />                                                
    <span *ngIf="col.key != 'Id'">{{ col.value }}</span>
  </td>
</tr>

Do I need to keep track of each chekbox through an array of ids, representing each checkbox?

With one checkbox, I could do something like this:

[checked]="someValueInTheTypeScriptFile"

I've though about using nested component containing a checkbox. Unfortunately, the problem remains the same. In fact, it will be easy to send data from component to container. However, targeting some or all the checkbox is what's a little challenging.

Thanks for helping

@Richard77 i see you have an accepted answer hope it works now — Rahul Singh
– Rahul Singh, Commented Aug 21, 2017 at 14:32

Fredrik Lundin Grande · Accepted Answer · 2017-08-21 07:11:04Z

1

To do it the angular way, you should definitely use bindings for this. Every row need to have something like an isChecked property that is used for the [(ngModel)]="isChecked" binding.

The top checkbox will then trigger a method that loops through all your items used for populating the checkbox list and set their isChecked property to either true or false.

In the template

<!-- Top checkbox -->
<input type="checkbox" (change)="onCheckTop($event.target.checked)" />  

<!-- Other checkboxes -->
<tr *ngFor="let tRow of initConsView.bodyData">
  <td *ngFor="let col of tRow">
    <input *ngIf="col.key == 'Id'" 
           type="checkbox" [attr.id]="'ck_' + col.value"                                                        
           (change)="onChecked($event, col.value)"
           <!-- ---------------------------------------- -->  
           [(ngModel)]="tRow.isChecked" /> <!-- Add this -->  
           <!-- ---------------------------------------- -->                                              
    <span *ngIf="col.key != 'Id'">{{ col.value }}</span>
  </td>
</tr>

In the TS file

onCheckTop(check: boolean) {
  this.initConsView.bodyData.forEach(data => data.isChecked = check);
}

In your ngModule make sure to add the FormsModule so you can use the [(ngModel)] directive in your template

// Other imports
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [ ..., FormsModule ],
  ....
})
export class AppModule {}

answered Aug 21, 2017 at 7:11

Fredrik Lundin Grande

8,2561 gold badge32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard77 Over a year ago

I think this way, I'll be able to even remember which individual rows user selected, and be able to check the checkbox when the page loads. Thank you so much.

Collectives™ on Stack Overflow

How to manipulate HTML elements in Angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related