Verify if an input checkbox is checked in Angular2

Question

I have a table in my HTML and one of the cells in every row there is a input check box.

Now I am trying to check if the checkbox is selected or not and below is what I have tried.

HTML:

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances">
          <td><input type="checkbox" (click)='onSelect()'></td>
          <td>{{data["IP"]}}</td>
        </tr>
    </tbody>
</table>

TS:

onSelect() {
    // We get the table data from the html and find if the checkbox is active.
    // The rows of the tables can be accessed by "rows" object and cells can be accessed using "cells" object.
    this.table_data = document.getElementById("just_a_table")

        for (var i=1, row; row = this.table_data.rows[i]){
          for (var j=0, cell; cell = row.cells[j]){
            if (<HTMLInputElement>cell[1].checked){
              console.log("It is checked")
            }
        }
    }
}

I am doing it this, way because I do not want to get the input element with it's ID and see if it checked.

Any help/directions here would be really appreciated.

Answer 1

HTML

 <table class="table table-hover" id="just_a_table">
       <thead>
           <tr>
               <th scope="col">Select</th>
               <th scope="col">IP Addr</th>
           </tr>
        </thead>
        <tbody>
           <tr *ngFor="let data of instances">
               <td><input type="checkbox" (change)='onSelect($event)'></td>
               <td>{{data["IP"]}}</td>
           </tr>
        </tbody>
   </table>

You need to check event.target.checked to solve this issue. This is how you can achieve that:

TS

onSelect(event) {
     if ( event.target.checked ) {
        // Your logic here
    }
}

1. You should be using (change) instead of (click) because it's better practice
2. Stop thinking on JS. You are now using Typescript and Angular. These frameworks exist because vanilla JS sucks so no need to keep writing vanilla js when you are using this awesome libraries/frameworks

Answer 2

First off I would use the Angular (click) event binding, I would also change your ngFor loop to this:

<tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">

now we can use the index to know which checkbox is checked.

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">
          <td><input type="checkbox" value="false" (click)='onSelect($event, i)'></td>
        </tr>
    </tbody>
</table>

I would then populate an array with false values for the length of instance. This is only if you need to know which one's are ticked, there are other methods to do this but this one comes to mind.

constructor() {
    for (let i = 0; i < this.instances.length; i++) {
        this.resultArray.push(false);
    }
}

I would then use event.target.checked to get the checked value of the clicked on checkbox and, based on the index value, change the appropriate array value. Remember to add the parameters here as well.

onSelect(event, index) {
    // If you need to know which checkboxes are checked
    this.resultArray[index] = event.target.checked;
    // If you don't
    const result: EventTarget = event.target.checked;
    // Do something with value
}

Answer 3

<tr *ngFor="let data of instances">
   <td><input type="checkbox" (click)='onSelect($event)'></td>
   <td>{{data["IP"]}}</td>
</tr>


onSelect(eventObject) {
    if (eventObject.target.checked) {
       // your logic here.
        console.log('checked', eventObject.target.checked);
       }

Hope, this would help you!! :)