I am trying to make a custom-checkbox component.

when I checkedAll check box, the value of _selectedItems has changed in .ts file, but not in UI.

similarly, after checked all of the checkbox(ie: _selectedItems = allData), the value has changed, BUT in UI the checkedAll is not selected.

my custom-component.html

<nb-checkbox *ngIf="_headerOrBody ==='header'" (checkedChange)="OnCheckBoxchangeAll(_allData)"  [checked]="_checkedAll" ></nb-checkbox>

<nb-checkbox *ngIf="_headerOrBody === 'body'"  (checkedChange)="OnCheckBoxchange(_data, $event)" [checked]="_selectedItems.indexOf(_data) >=0" ></nb-checkbox>

custom-component.ts

  OnCheckBoxchange(_data, isChecked: boolean) {
    if (isChecked === true) {
      this._selectedItems.push(_data);
      this._selectedItems = [...this._selectedItems];
    }
    else {
      this._selectedItems.splice(this._selectedItems.findIndex(x => x.id === _data.id), 1);
      this._selectedItems = [...this._selectedItems];
    }

    // check arrays are same
    const array2Sorted = this._allData.slice().sort();
    var isSame = this._selectedItems.length === this._allData.length && this._selectedItems.slice().sort().every(function (value, index) {
      return value === array2Sorted[index];
    });


    if (isSame) {
      this._checkedAll = true;
    }
    console.log("this._selectedItems", this._selectedItems);
    console.log("this._allData", this._allData);
  }

  OnCheckBoxchangeAll(_data) {
    this._checkedAll = !this._checkedAll;

    if (this._checkedAll === true) {
      this._selectedItems = [..._data];
    }
    else {
      this._selectedItems = [];
    }

    console.log("this._selectedItems", this._selectedItems);
    console.log("this._allData", this._allData);
  }
}

holiday.component.ts

// inside <thead>
            <ngx-custom-checkbox [headerOrBody]="'header'" [allData]="holidays" [data]="data" [(selectedItems)]="selectedItems"> </ngx-custom-checkbox>

// inside <tbody>

               <ngx-custom-checkbox [headerOrBody]="'body'" [allData]="holidays" [data]="data" [(selectedItems)]="selectedItems"> </ngx-custom-checkbox>

checking a check-box is working fine If check all of the checkboxes, checkAll check box sholud check(This is not working) If checkAll check-box is checked, then all of the check-boxes sholud check (This is not working) I guess the issue is beacuse of *ngIf="_headerOrBody ==='header'" and,*ngIf="_headerOrBody === 'body'" . But I am not sure. Any ideas?