Expected behavior after changing checkbox values programmatically, onchange not firing properly. ie., clicking on the previously checked should check on the first click. Actual behavior clicking on the previously checked not checking on the first click. Resources (screenshots, code snippets etc.)

After calling deleteAllDates() the checkboxes are unchecked as expected, but when I click again the previously selected checkbox nothing happens; I have to click again to check. Other checkboxes that I haven't touched before work as expected.

onChange(event) {
let idstr: string = event.element.id;
let id = idstr.substr(3);
if (event.element.checked) {
  this.chosenTimes.push(this.times[id]);
}
else {
  let ndx = this.chosenTimes.indexOf(this.times[id]);
  this.chosenTimes.splice(ndx, 1);
}   }

deleteAllDates() {
let chkbs = this._document.querySelectorAll('[id^="chk"]');

chkbs.forEach((c: any) => {                
    (c as CheckboxComponent).checked=false;               
});

this.datePicker.clearDate();  }

<mdb-checkbox *ngFor="let t of times; let i=index;" [default]="false" id="chk{{i}}" (change)="onChange($event)" >
    {{t}}</mdb-checkbox>