Angular Material: Mat Table sometimes get updated in real-time sometimes not

Question

I've a Mat Table which calls a GET request. Also I've a Mat Dialog which takes data and on Save click calls POST request. Everything is working fine but the table sometimes get updated after I click the Save button but sometimes not (I've to reload the page and to see it updated).

mat-dialog.component.ts

onSubmit() {  // This method is called on the button click in Mat-Dialog
    if(this.formdata.invalid) {
      return;
    }
    this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => {
      this._snackBar.open('New Question Category Added Successfully', '', {
        duration: 7500,
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition
      });
    });
  }

main.component.ts

constructor(private adminCategory: AdminCategoryService, private fb: FormBuilder, public dialog: MatDialog) { 
    dialog.afterAllClosed.subscribe(() => {
      console.log(''); // This line gets called everytime on close of the modal
      this.getTableData(); // So this line also gets called but not re-render the template updated everytime
    });
}

openDialog() {
    this.dialog.open(CreateSectionModalComponent);
}

private getTableData() {
    this.columnsToDisplay = ['id', 'questionCategoryName', 'isActive', 'Action'];
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource = new MatTableDataSource<QuestionCategory>(this.QuestionCategoryData);
          this.dataSource.paginator = this.paginator;
        }, error => {
          console.log(error);
        });
}

ngOnInit() {
    this.getTableData();
}

Is there anything am missing ?

From your code it seems that it doesn't update the view after data updated. Did you console log your getTableData() subscription, whether you get the updated data? — Sam, Jun 14 '20 at 17:08
@Sam on reloading the page ```getTableData``` can fetch new values — Avishek, Jun 15 '20 at 03:08
can you try using this.dataSource._updateChangeSubscription(); after assigning the result — rohithd, Jun 15 '20 at 08:05

score 0 · Answer 1 · answered Jun 13 '20 at 12:48

0

Change your ngOnInit() and getTableData() to this

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

private getTableData() {
    this.adminCategory.getQuestionCategory().subscribe((reponse: any) => {
          this.QuestionCategoryData = reponse.questionCategoryList;
          this.dataSource.data = this.QuestionCategoryData;
        }, error => {
          console.log(error);
        });
}

Here you are initializing the mat-table and then just updating the data.

answered Jun 13 '20 at 12:48

Nikhil

1,126
12
26

no i still have to reload the page it's not working. What I'm not understanding is that in ```constructor``` ```afterAllClosed``` gets called upon closing dialog inside eveything gets executed properly as per ```console.log``` still why it's not reflecting – Avishek Jun 13 '20 at 14:42
Did you try editing the `openDialog()` by adding this `const dialogRef = this.dialog.open(component); dialogRef.afterClosed().subscribe(result => { console.log('After closed') ; this.getTableData(); });`? If it outputs anything. May be you are not closing the dialog correctly. If you have a StackBlitz please share so I can help. I have implemented this scenario a lot of times, I never had issues. – Nikhil Jun 13 '20 at 16:32
for Mat-Dialog close i've used ```mat-dialog-close``` as stated in documentation. And what am seeing is that everytime I close the dialog the ```console.log``` inside ```afterClosed``` gets triggered. So I guess the dialog is closing properly. – Avishek Jun 14 '20 at 05:34
Please create an example on Stackblitz. It would easier to help you. – Nikhil Jun 14 '20 at 06:25

score 0 · Answer 2 · answered Jun 14 '20 at 11:04

What i see from your sample codes is you are adding new data from the dialog and then fetching the table data again when dialog is closed. But there is no proof that your data was saved at that time. I'd suggest not saving data in your dialog code, instead return the data entered on your dialog to your main component when onSubmit called, and call the this.adminService.createQuestionCategory() service method in your main component, and then call getTableData() inside subscribe. This way you'll be sure that you fetch data after new data was recorded.

score 0 · Answer 3 · answered Jun 15 '20 at 07:21

according to your code there is no implementation for update mat-table after submit().Once you subscribe from submit, juset execute changeDetectorRefs & renderRows() from Mat-table before show snack bar

@ViewChild(MatTable, { static: true }) table: MatTable<any>;
constructor(private changeDetectorRefs: ChangeDetectorRef)

    onSubmit() {
        if(this.formdata.invalid) {
          return;
        }
        this.adminService.createQuestionCategory(this.formdata.value).subscribe(reponse => 
         {

           this.changeDetectorRefs.detectChanges();
           this.table.renderRows();
          this._snackBar.open('New Question Category Added Successfully', '', {
            duration: 7500,
            horizontalPosition: this.horizontalPosition,
            verticalPosition: this.verticalPosition
          });
        });
      }

Angular Material: Mat Table sometimes get updated in real-time sometimes not

3 Answers3