creating a select all checkbox using angular 2

Question

`I am trying to create a checkbox that checks all the checkboxes in the div once checked. The div only contains checkboxes.

//TS FILE

 constructor() { }
 
  checkAll: ElementRef | undefined;
  selectAll(isChecked: boolean){
  `your text`this.checkboxes.forEach(this.checkboxes = this.checkboxes.checked = isChecked)};

 checkboxes = this.checkAll.nativeElement.parentElement.querySelectorAll('input[type="checkbox"]');

 ngOnInit(): void {
}

//HTML FILE

                 <label
                  for="inputFirstName"
                  class=""
                  id="select-all-checkbox"
                  #checkAll 
                  (check)="selectAll(checkAll.checked)"
                  >Select all</label
                >
                <input
                  type="checkbox"
                  id="selectall"
                  class="mx-4"
                  style="width: 20px; height: 20px; border-radius: 3px"`your text`
                />

`

Answer 1

You can import selection model

import {SelectionModel} from "@angular/cdk/collections";

or

    <input
                  type="checkbox"
                  id="selectall" #selectAllCheckBox
style="width: 20px; height: 20px; border-radius: 3px"
(change)="selectAll(selectAllCheckBox.checked)"
                  class="mx-4" 
                  />

in .ts

constructor(private checkAll: ElementRef) {}
      ngOnInit() {
        this.checkboxes = this.checkAll.nativeElement.querySelectorAll(
          'input[type="checkbox"]'
        );
      }
      selectAll(isChecked) {
        this.checkboxes.forEach(chekbox => {
          chekbox.checked = isChecked;
        });
      }