can't able access the service callback subscription of angular-slickgrid

Question

We are currently upgrading the angular-slickgrid from version 2.30.4 to 3.3.2.

During the migration to version 3, we can't access the onPaginationChanged and other callbacks from angularGridInstance as mentioned below.

this.angularGrid.paginationService.onPaginationChanged.subscribe(e => {
    this.writeConsole('Info', this.constructor.name, 'onPaginationChanged', type, '-', e);
    this.changeSelectionHeader(assignmentObject['internalProcess']['angularGrid'].slickGrid, assignmentObject['internalProcess']['angularGrid'].dataView);
})

We have explored your documentation and analyzed that we can get this callback from the <angular-slickgrid> tag, however, are there any chances that we can access them through typescript itself as mentioned in above format.

Answer 1

Angular-Slickgrid >=3.x events are actually all JS Custom Events, so you can use any JavaScript ways of listening to event changes and that would work. You have plenty of ways to deal with what you're trying to do

1. default and documented way - template events

Template Custom Events - Wiki

<angular-slickgrid gridId="grid1"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onPaginationChanged)="onPaginationChanged($event.detail)">
</angular-slickgrid>

2. use Grid State

documented in Grid State & Preset - Wiki and gives you access to multiple things like Filters, Sorting, Pagination, Pinning

<angular-slickgrid gridId="grid1"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onGridStateChanged)="gridStateChanged($event.detail)">
</angular-slickgrid>

gridStateChanged(gridStateChanges: GridStateChange) {
    console.log('Grid State changed:: ', gridStateChanges);
}

3. use JS addEventListener on the Custom Event

ngAfterViewInit() { 
 document.querySelector('[gridid="grid1"]')?.addEventListener('onPaginationChanged', (data: any) => {
    console.log('event listener pagination changed', data)
  })
}

4. use component ref to have access to Angular-Slickgrid private services

not Recommended at all, it's cheating and might break in the future

I'm actually surprised that this works given that the EventPubSubService is a private property (who knows this might break in the future), but it seems that adding a component ref is giving us access to the entire instance of Angular-Slickgrid grid even the private service variables.

Technically speaking this should not event be allowed by Angular/TypeScript, but it looks like as of today you could cheat.

<angular-slickgrid gridId="grid1" #myGridRef
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset">
</angular-slickgrid>

ngAfterViewInit() {
  this.myGridRef._eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
  console.log('eventPubSub',  this.myGridRef._eventPubSubService)
}

5. expose EventPubSubService to the AngularGridInstance

It seems that this service is not exposed (yet) to the AngularGridInstance and I could probably add it in a future version, but I recently release (this week) the version v5.0.0 of Angular-Slickgrid and I never work on older version so for this use case, you would have to upgrade to get access to this case

Requires a new Angular-Slickgrid feature (now available with v5.1.0), possibly in the future

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    
    this.angularGrid.eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
}

Final Note

Obviously the best option, in 99% of the time, is Option 1 and/or Option 2 (which is why it's documented), while other options do work, they're obviously not ideal solutions and also not documented for that reason, the last Option 5 also seems valid and might arrive (now available) in the near future but only in Angular-Slickgrid >=5.x because I'm a single developer and this project is Open Source and I'm not being paid to support and so I'm only providing support for latest version only, which as of today is v5.0.0 and higher

As a last final note, I always provide Migration Guides between each version and it is important to follow them in the correct order (in your case Migration to 3.x , most answers related to migration were already answered in these guides.