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.

in Angular-Slickgrid >=3.x they're all Custom Events, you can't use `subscribe` but you can use regular JS event listener on the grid DOM element. Your question was hard to understand, you should try to provide more info of what you tried on the next question — ghiscoding, Oct 20 '22 at 14:54
hi @ghiscoding ,After going through your source code we came to know that we can subscribe to the eventPubSubService to use the callbacks like onPaginationChanged,onGridBeforeResize, etc... how can I access the eventPubSubService from my source code — Yeswanth Ravikumar, Oct 20 '22 at 16:38
if my answer below is useful please upvote it so that others with the same problem would know this is valid. Thanks — ghiscoding, Dec 05 '22 at 21:55

ghiscoding · Accepted Answer · 2022-12-05T21:54:26.517

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.