Why ticking all checkbox at once doesn't update or fire the (change) event?

If I select a checkbox then it calls the method on (change) event and updates the collection but now I have puyt checkall button that checks all the checkboxes but I cannot figure out how to update the collection in this case?

<input type="checkbox" #chkSelectedSubjectTest (change)="checkAll(chkSelectedSubjectTest.checked)">
<tr *ngFor="let item of mf.data">
            <td>
              <input #chkSelectedSubject type="checkbox" (change)="updateSelection(item.Id, chkSelectedSubject.checked)" 
              class="form-check-input" name="chkSelectedSubject" id="chkSelectedSubject">
            </td>
            <td>  </td>
            <td>  </td>
            <td> </td>
        </tbody>

methods:

  updateSelection(subjectId: number, isChecked: any) {     
    if(isChecked) {
      this.selectedSubjects.push(subjectId);
    }
    else {
      this.selectedSubjects= this.selectedSubjects.filter(item=> item != subjectId);
    }

    if(this.selectedSubjects.length > 0)
      this.isDeleteDisabled= false;
    else
      this.isDeleteDisabled= true;
  }

  checkAll(ele) {

    var checkboxes = document.getElementsByTagName('input');
    if (ele) {
        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)
}