how to select all checkboxes in angular 6?

I'm trying to make a table with checkboxes but I cant set a checkbox that check true all checboxes in per page. I want to check all checkboxes but it isn't working correctly.

html

    <table id="myTable">
      <tbody >
            </tbody>
            <tbody >
              <tr >
                <th>
                  <input type=" checkbox" (change)="checkAll(this)">
        </th>
        <th>
          id
        </th>
        <th>
          fname
        </th>
       
        </tr>
      </tbody>
      <tbody *ngFor="let item of result" style="border:1px solid #D3D3D3">
        <td>
          <input type="checkbox" (change)="getCheckboxValues($event,item)" [checked]="check_true">
        </td>
        <td>
          {{ item.id }}
        </td>
        <td>
          {{ item.fname }}
        </td>
      </tbody>
    </table>

how to select all checkboxes in angular 6?

I'm trying to make a table with checkboxes but I cant set a checkbox that check true all checboxes in per page. I want to check all checkboxes but it isn't working correctly.

html

    <table id="myTable">
      <tbody >
            </tbody>
            <tbody >
              <tr >
                <th>
                  <input type=" checkbox" (change)="checkAll(this)">
        </th>
        <th>
          id
        </th>
        <th>
          fname
        </th>
       
        </tr>
      </tbody>
      <tbody *ngFor="let item of result" style="border:1px solid #D3D3D3">
        <td>
          <input type="checkbox" (change)="getCheckboxValues($event,item)" [checked]="check_true">
        </td>
        <td>
          {{ item.id }}
        </td>
        <td>
          {{ item.fname }}
        </td>
      </tbody>
    </table>

ponent.ts

       getCheckboxValues(ev, data) {
    let obj = {
      "order": data
    }
    let selected_rows = [];

    if (ev.target.checked) {
      // Pushing the object into array
      this.newArray.push(obj);
    } else {
      let el = this.newArray.find(itm => itm.order === data);

      if (el)
        this.newArray.splice(this.newArray.indexOf(el), 1);
      if (this.newArray.length == 0) {
        this.newArray = [];
      }
    }

    if (this.newArray.lenght > 0) {
      for (let i in this.newArray) {
        selected_rows.push(this.newArray[i].order.bulkid);

        this.selected_rows = selected_rows;
      }
    }
  }

  checkAll(ele) {

    var checkboxes = document.getElementsByTagName('input');
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = true;
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
    console.log(ele)
}

I'm trying to make a table with checkboxes but I cant set a checkbox that check true all checboxes in per page. I want to check all checkboxes but it isn't working correctly.

• javascript
• angular
• typescript

3 Answers 3

Prepared a small demo to show how this can be done using ngModel directive. Link: https://stackblitz./edit/angular-lxjrdh

It uses Array.every to check if all are checked or not. If checked, it resets all otherwise checks all.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.scss']
})
export class AppComponent {
  title = 'Angular 6 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor(){
      this.masterSelected = false;
      this.checklist = [
        {id:1,value:'A',isSelected:false},
        {id:2,value:'B',isSelected:true},
        {id:3,value:'C',isSelected:true},
        {id:4,value:'D',isSelected:false},
        {id:5,value:'E',isSelected:false},
        {id:6,value:'F',isSelected:false},
        {id:7,value:'G',isSelected:false},
        {id:8,value:'H',isSelected:false}
      ];
  }

}

 1. .form-control:focus {    color: var(--bs-body-color);   
    background-color: var(--bs-body-bg);    border-color: #86b7fe;
    input[type=checkbox] {   display: none; }
           input[type=checkbox] + label:before {   content: "\2714";   border:
     padding-bottom:    
       0.3em;   margin-right: 0.2em;   vertical-align: bottom;   color: transparent;   transition: .2s; }
           input[type=checkbox] + label:active:before {   transform: scale(0); }
           input[type=checkbox]:checked + label:before {   background-color:    MediumSeaGreen;   border-color: MediumSeaGreen;
    color: #fff; }
 2. List item