The primary element contains tabs, component A, B, and so on.
My component_A comes with preloaded information, but it also includes a filter button. Additionally, there is a button that triggers a drawer from another component (the main component).
toggleDrawer(): void {
this.drawerService.toggleDrawer(); // Invoking the service to toggle the drawer
}
Main component:
<mat-drawer-container class="drawer-container" autosize>
<div class="main-component-container">
<div class="mat-tab-grp">
<nav
class="nav-bar"
mat-tab-nav-bar
#tabGroup
mat-stretch-tabs
color="accent"
>
<a
mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive
#rla="routerLinkActive"
[active]="rla.isActive"
>
<mat-icon>{{ link.icon }}</mat-icon>
{{ link.label }}
</a>
</nav>
<div class="ng-temp">
<router-outlet></router-outlet>
</div>
</div>
</div>
<mat-drawer
#drawer
class="example-sidenav mat-elevation-z2"
mode="side"
position="end"
>
<form [formGroup]="filterGroup" class="filter-fields">
some codes
</form>
</mat-drawer>
</mat-drawer-container>
TypeScript file:
this.drawerService.toggleDrawer$.subscribe(() => {
this.drawer.toggle(); // Toggling the drawer
});
Moreover, there is a button for data retrieval
submitForm() {
this.dataService
.fetchData(someParameters)
.subscribe(
(response) => {
this.drawer.close(); //closing the drawer and updating the mat-table in component A.
}
}
In the dataService:
....this.dataSourceSubject.next(tmp_table);Once the drawer closes and the toggleDrawer() process completes, I wish for the mat-table to refresh as well. Currently, the table only updates when switching to other tabs, as component A resides within a mat-tab. Reloading the page is not an option since the preloaded data will be fetched again. Therefore, I am solely focused on updating the table.