jquery - How to manipulate HTML elements in Angular2 -

let's have table:

i'd check top checkbox , have them checked, or uncheck have of them unchecked.

in jquery, this:

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

you can find checkbox , applied change it.

i don't see how establish 2-ways binding checkboxex 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 need keep track of each chekbox through array of ids, representing each checkbox?

with 1 checkbox, this:

[checked]="somevalueinthetypescriptfile" 

i've though using nested component containing checkbox. unfortunately, problem remains same. in fact, easy send data component container. however, targeting or checkbox what's little challenging.

thanks helping

to angular way, should use bindings this. every row need have ischecked property used [(ngmodel)]="ischecked" binding.

the top checkbox trigger method loops through items used populating checkbox list , set ischecked property either true or false.

in 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 -->              <!-- ---------------------------------------- -->                                                   <span *ngif="col.key != 'id'">{{ col.value }}</span>   </td> </tr> 

in ts file

onchecktop(check: boolean) {   this.initconsview.bodydata.foreach(data => data.ischecked = check); } 

in ngmodule make sure add formsmodule can use [(ngmodel)] directive in template

// other imports import { formsmodule } '@angular/forms';  @ngmodule({   imports: [ ..., formsmodule ],   .... }) export class appmodule {}