typescript - get child element in angular 2 -

please have @ below code.

import { component,viewchild,querylist,viewchildren } '@angular/core'  @component ({ selector : 'other-component', template : `           <h2>othercomponent<h2>           <table #tab id="tab">             <tr *ngfor="let val of valarray">               <td>{{val}}</td>               <input type="checkbox" [value]="val">             </tr>           </table>          <button (click)="getchecked()">click me</button>` }) export class othercomponent{   valarray = ['one','two','three','four'];   @viewchild ('tab') elem;   getchecked = () => {      console.log (this.elem.nativeelement.children[0].children)   }  } 

at end of table row there checkbox has been assigned row value (json object) want collect checked boxes in angular 2.

in plain javascript can below

var yy = document.getelementbyid('tab').getelementsbytagname('input'); 

i got looking this.elem.nativeelement.children[0].children

this gave me array of tr elements got checked input boxes

is there better way in angular 2?

change html (add #cbx input) like:

<tr *ngfor="let val of valarray"><input #cbx type="checkbox" [value]="val"></tr>     

then in component class:

@viewchildren('cbx') checkboxes; getchecked = () => {   console.log(this.checkboxes.toarray().map(x => x.nativeelement)); } 

it print array of desired checkboxes

see live plunker example

update

alternative way using dom api directly:

@viewchild ('tab') elem; getchecked = () => {   console.log(this.elem.nativeelement.getelementsbytagname('input'));   console.log(this.elem.nativeelement.queryselectorall('input')); }