How to update angular mat-table if the drawer is in another component?

Main component has tabs, component A, B etc.

My component_A has preloaded data but I have a button for filter. I have a button that toggles a drawer from another component (main component).

toggleDrawer(): void {
this.drawerService.toggleDrawer(); // Call service to toggle drawer
}


main component:

this.drawerService.toggleDrawer$.subscribe(() => {
this.drawer.toggle(); // Toggle the drawer
});


and this has button that fetches data

submitForm() {
this.dataService
.fetchData(someParameters)
.subscribe(
(response) => {
this.drawer.close(); //this closes the drawer then should update the mat-table in the component A.
}
}


in the dataService: ....this.dataSourceSubject.next(tmp_table);

After the drawer closes and the toggleDrawer() finishes, I want the mat-table to update too. It only updates when I go to other tabs, since this component A is in a mat-tab. That's the time it refreshes the table. I also can't make it reload the page because the preloaded data will be fetched again. So I just want the table to update.

Continue reading...