Angular Material Table sibling refresh

Question

I do not know how to refresh a table from a sibling component. My dashboard HTML has components. I perform an action and need the angular material table to refresh from the click from a dialog box. I am using the default MatTableDataSource provided but this.table.renderRows() only works from a parent child relationship. The code shown shows the layout of the parent. Inside floating action button, their are several components which all different modals for different actions. The items on the table can be selected and peform an action. I manually delete the array of results (selected rows from the table) but the data is removed in the console and not refreshed on the table

I have provided an update to the structure

The file below is called a dashboard.html file

<app-table></app-table>

<floating-action-button></floating-action-button>

Inside my app table component is the Mat Table. Inside Floating action I use const dialogRef = this.dialog.open(ActionComponent1, { width: '500px', height: '500px', I have 3 other dialog components inside the floating action button .ts file that after pressing okay from the dialog box, the table should be refreshed. I am confused on how to signal the table to refresh from the action component 1 within floating-action-button.ts which contains @Component ActionComponent1 (I called it action one on here as an example. I press okay on the dialog box, a function is run to delete the row from the table, and the table needs to be refreshed but I cant seem to know how to signal the table.renderRows() from all the way inside the Action 1 component which is inside floating action button.ts. I also never use the action 1 component selector such as anywhere because of how it is a dialog box

Answer 1

You can pass information that the table should be refreshed through service using subject

Answer 2

if you pass as input a reference to the component you can make a table.renderRows()

<app-table #apptable></app-table>

<floating-action-button [apptable]="apptable"></floating-action-button>

Inside

@ViewChild(MatTable) table

Inside floating-action-button

@Input("apptable") apptable
click()
{
    this.apptable.table.renderRows()
}