why mat-table does not render its rows when remove a row?

Question

I use a child component named TeacherSchedulingTableComponent to display teacherSchedulingDays array received as input.

HTML of parent component:

<app-teacher-scheduling-table #appTable
     [teacherSchedulingDays]="filteredTeacherSchedules"
     (rowToEdit)="editTeacherSch($event)"
     (rowToRemove)="removeTeacherSch($event)"
     >
</app-teacher-scheduling-table>

content of ts file of teacher-scheduling-table component:

@ViewChild(MatPaginator) paginator: any;
  @ViewChild(MatTable,{static:true}) table!: MatTable<any>;

  @Input() teacherSchedulingDays!: DaySans[];
  @Output() rowToEdit = new EventEmitter<DaySans>();
  @Output() rowToRemove = new EventEmitter<Date>();

  schedulingPaging: MatTableDataSource<any>;
  selection: SelectionModel<any>;
  displayedColumns: string[] = ['day','Date','sans1', 'sans2', 'sans3','sans4', 'sans5', 'sans6', 'operation'];

  constructor(public editDaySansDialog: MatDialog) {
    this.schedulingPaging = new MatTableDataSource<DaySans>(this.teacherSchedulingDays);
    this.selection = new SelectionModel<DaySans>(true, []);
  }

  ngOnInit(): void {
    this.schedulingPaging = new MatTableDataSource<DaySans>(this.teacherSchedulingDays);
    this.selection = new SelectionModel<DaySans>(true, []);
  }

  ngAfterViewInit() {
    this.schedulingPaging.paginator = this.paginator;
  }

  handleRemoveItem(row: any) : boolean{
    this.rowToRemove.emit(row.dayDate);
    return false;
  }

  handleEditItem(row: any) : boolean{
    const dialogRefToDaySans = this.editDaySansDialog.open(ScheduledDayEditDialogComponent, {disableClose: true, data: row});
    dialogRefToDaySans.afterClosed().subscribe((result) => {
      if (result != undefined) {
        this.rowToEdit.emit(result);
        this.refresh();
      }
      else{
        // this.table.renderRows();
        console.log(`edit is canceled...`);
        this.refresh();
      }
    });
    return false;
  }

  refresh(): void{
    console.log(`refresh is started...`)
    this.table.dataSource = this.teacherSchedulingDays;
    this.schedulingPaging = new MatTableDataSource<DaySans>(this.teacherSchedulingDays);
    this.selection = new SelectionModel<DaySans>(true, []);
    this.table.renderRows();
  }
}

and a part of its HTML:

    <!-- operation Column -->
    <ng-container matColumnDef="operation">
      <th mat-header-cell *matHeaderCellDef> opertionn </th>
      <td mat-cell *matCellDef="let scheduledDay" class="mat-cell">
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu" [overlapTrigger]="false">
          <button mat-menu-item (click)="handleEditItem(scheduledDay)">
            <mat-icon>create</mat-icon>edit</button>
          <button mat-menu-item (click)="handleRemoveItem(scheduledDay)">
            <mat-icon>delete</mat-icon>remove</button>
        </mat-menu>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns" class="mat-header-row" ></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="mat-row"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[2, 4, 8]" showFirstLastButtons></mat-paginator>
</div>

so far, when a row of the table is selected to remove, the selected row is emitted to parent component to remove. the parent component remove the selected row correctly, but the table is not refreshed or rendered, and removed row still is shown by the table. I tried some ways such as using ViewChiled: @ViewChild('appTable') appTable!: TeacherSchedulingTableComponent; to access refresh method, but I did not succeed, also calling refresh method in the teacher-scheduling-table component itself does not works and the table rows are not rendered. content of ts file of parent component:

@ViewChild('appTable') appTable!: TeacherSchedulingTableComponent;

removeTeacherSch(row: Date):boolean{
    this.filteredTeacherSchedules = this.filteredTeacherSchedules.filter(scheduledDay => {return scheduledDay.dayDate != row});
    this.appTable.table.renderRows();
    return false;
  }

how can fix this problem? Best regards

Answer 1

Try to call ngOnInit() function like this

@ViewChild('appTable') appTable!: TeacherSchedulingTableComponent;

removeTeacherSch(row: Date):boolean{
    this.filteredTeacherSchedules = this.filteredTeacherSchedules.filter(scheduledDay => {return scheduledDay.dayDate != row});
    this.appTable.table.renderRows();
    this.ngOnInit()
    return false;
  }