How can i call a function on a base component from a dialog window in Angular

Question

I am looking for a way to call a function on a component. Here is my Setup, i have a reusable component which is my base for all data displayed in grids and includes the filter logic, chips for filters, export and the actual grid. All that works great so far. Now i have instances where user can click on a row and edit some data which is displayed in a dialog window via angular material. ll that is working fine but what i am trying to do is to go and reload the grid after a user made changes or added data. My Base component has a function called onGridRelaod

 onGridReload($event: IGridReloadPayload) {
        this.setDataFetcherFactory($event.currentDataFetcherParams);
        this.agGridBase.setDataSource(() => {
        });
    }

So the question is how can i call the onGridRelaod from my dialog? I would assume i would have to expose it to the component which uses the base component and then have the dialog call it on the component which opened it. But not 100 % sure how to go about it

Answer 1

Try to emit the event from child component to parent.

Dialog component:

...
onAdd = new EventEmitter();

onButtonClick() {
  this.onAdd.emit();
}
...

Parent Component:

...
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
  // do something
});
dialogRef.afterClosed().subscribe(() => {
  // unsubscribe onAdd
});
...

Answer 2

Depending of your page structure but you can create sibling service that provide a signal Observable. Your modal push inside this observable to notify "something change". And your component can subscribe to it for reloading grid.

You can pass information like rowId for partial reload to speed up your reload.

the service

@Injectable()
export class MyTableService {
  public change: EventEmitter<void> = new EventEmitter();
}

your modal

...
public onClose() {
  this.myTableService.change.next();
}
...

your component

...
public ngOnInit() {
  this.myTableService.change.subscribe(() => {
    this.onGridReload(...)
  })
}
...