'Angular - How to prevent "RowSelected" to be fired before initialization done in AG-Grid

I'm working with Angular and Ag-Grid and I'm currently facing a problem for which I haven't found a solution despite my research.

Here is the scenario I would like to implement:

  1. Following the opening of a module, I load an Ag-Grid table in my component. This one retrieves data from a service as an observable.
  2. After having recovered my data, I display them and I make a selection by manual checkboxing according to certain conditions.
  3. After this initialization, I want the user to be able to modify the selection, and that this modification triggers an event to perform certain actions. I use Angular event binding to do that.

Here is my problem: this event is triggered when I make my initial manual selection. I'd like it to be triggered only after I finish that selection, but I can't find a way to do that.

I've tried adding a variable indicating that the table initialization is complete after the forEachNode, but the assignment is done before the selection. I thought of using promises but I would like to solve my problem without.

Would you have any hints for me to find a solution?

Here is my code:

HTML

<mat-expansion-panel (opened)="loadEvents()">
    <ag-grid-angular ... (rowSelected)="rowSelectionChanged($event)" ... ></ag-grid-angular>
</mat-expansion-panel>

TypeScript

loadEvents(): void {
    this.eventService.getEvents().subscribe(data => {
        this.gridApi.applyTransaction({ add: data });
        this.gridApi.forEachNode(this.selectRow.bind(this));
    }
}

selectRow(rowNode: RowNode): void {
    rowNode.setSelected(true); // Here it fired rowSelectionChanged()
}

rowSelectionChanged(event: RowSelectedEvent): void {
    console.log("RowSelectionChanged() fired");

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source