Angular: Mat-Table not updating after Mat-Dialog close

Question

I have a dialog box with a form. After inserting data on clicking save the HTTP POST service gets called and data gets inserted in the database. This dialog component is connected with a parent component where a table (Mat Table) is displayed. This Mat Table gets its data from the HTTP GET service called inside getTableData() method. What problem am facing is that upon clicking the SAVE button of the dialog (which inserts data and closes the dialog then) the tabled doesn't get updated with the newly inserted value. Below is my code for reference:

Dialog Component

constructor(private adminService: AdminCategoryService, private fb: FormBuilder, private snackbarService: SnackbarService, public matDialogRef: MatDialogRef<CreateCategoryModalComponent>) {}

onSubmit() {
  this.adminService.createExamCategory(this.formdata.value).subscribe(response => {
    if(response.message == 'Duplicate exam category') {
      this.snackbarService.class = 'red-snackbar';
      return this.snackbarService.open('Exam Category Already Present !!');
    }
    this.snackbarService.class = 'green-snackbar';
    this.snackbarService.open('Exam Category Added Successfully');
    this.matDialogRef.close(); // Even after specifying mat-dialog-close in HTML I specified here also for being sure that the dialog closes
  });
}

Dialog HTML

<mat-dialog-actions>
        <button type="submit" mat-flat-button color="primary" mat-dialog-close cdkFocusInitial [disabled]="formdata.invalid">Save</button> // Here the "cdkFocusInitial" is also  throwing a warning
        <button mat-flat-button color="warn" mat-dialog-close>Close</button>
    </mat-dialog-actions>

cdkFocusInitial Warning message

Element matching '[cdkFocusInitial]' is not focusable. a11y.js:1510

Parent component ts of the dialog

openDialog() {
    const dialog = this.dialog.open(CreateCategoryModalComponent);
    dialog.afterClosed().subscribe(() => {
      this.ngOnInit(); // Firstly here I called "getTableData" then I thought that calling "ngOnInit" as it will refresh the full component.
    });
}

private getTableData() {
  this.adminCategory.getExamCategory().subscribe((reponse: any) => {
    this.isLoading = false;
    this.ExamCategoryData = reponse.examCategoryList;
    this.dataSource.data = this.ExamCategoryData;
    this.length = this.ExamCategoryData.length;
  }, error => {
      console.log(error);
  });
} 

ngOnInit() {
  this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
  this.dataSource = new MatTableDataSource<ExamCategory>();
  this.dataSource.paginator = this.paginator;
  this.isLoading = true;
  this.getTableData();
}

Please help where I am facing the issue ? Also after what am seeing is that when the table doesn't get updated if I press the Cancel button in the dialog which also has mat-dialog-close the table gets refreshed.

P.S. Sometimes the realtime update of the table is working

Angular: Mat-Table not updating after Mat-Dialog close

0 Answers0