array.push(row) is not detecting as a change in angular EventEmitter

Question

I have following code and the Eventemitter is working only for the first row selection and the deselect. The reason is this.selectedRows.push(row) is not detected as a change from EventEmitter. Though this is not a proper solution, it is working when I filter again the rows and assign again to the selectedRows. Can someone explain and give a proper solution for that?

ParentComponent.html

<ng-container matColumnDef="select">
     <th mat-header-cell *matHeaderCellDef="let table" [resizeColumn]="true" [index]="i">
          <mat-checkbox (change)="$event ? masterToggle(supplier.invoice) : null"
                          [checked]="selection.hasValue() && isAllSelected(supplier.invoice)"
                          [indeterminate]="selection.hasValue() && !isAllSelected(supplier.invoice)"
                          [aria-label]="checkboxLabel()">
          </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                          (change)="$event ? toggle($event, row) : null"
                          (change)="$event ? selection.toggle(row) : null"
                          [checked]="selection.isSelected(row)"
                          [aria-label]="checkboxLabel(row, supplier.invoice)">
          </mat-checkbox>
      </td>
</ng-container>

ParentComponent.ts

toggle($event, row) {
console.log("=====================",this.selectedRows);
  if($event.checked) {
    
    if (this.selectedRows.indexOf(row) === -1) {
      console.log("======================", "Checked");
      this.selectedRows.push(row);
      this.selectedData.emit(this.selectedRows);
    }
  } else {
    const index = this.selectedRows.indexOf(row);
    if (index > -1) {
      this.selectedRows = this.selectedRows.filter(obj => obj !== row);
      
      this.selectedData.emit(this.selectedRows);
    }
  }
}