Search code examples
angulartypescriptag-gridngfor

Angular dynamic event name inside ngFor

I am trying to add dynamic event names for ag-grid but in general to a angular component. I tried different types of bindings to make the names for (gridready) value to onGridReady1($event), onGridReady2($event), onGridReady3($event) etc based on the index. +i, {{i}}, (i) etc options did not work. What could be the possible option to get dynamic onGridReady.

<div *ngFor="let item of Collection; let i = index">              
    <ag-grid-angular (gridReady)="['onGridReady+i+($event)']"

    </ag-grid-angular> 
 </div>
Solution

  • You should be able to do this:

    <div *ngFor="let item of Collection; let i = index">              
    <ag-grid-angular (gridReady)="onGridReady(i, $event)">

    </ag-grid-angular> 
 </div>

    with the following onGridReady method:

    onGridReady(index: number, params) {
  console.log('got gridReady event for grid #', index);
}