callbacks losing this reference

I’ve used the GridsterItem.initCallback as well as the GridsterConfig.itemChangeCallback and both lose the this reference, even using a fat arrow.

` gridsterConfig.itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {

console.log(this.changes); <-- this.changes is simply an array that is tracking individual items changes

this.changes.push(item); <-- for ease of testing, we simply push the gridster item

console.log(this.changes); <-- never has the other values.

}; `

Of course my code is a little more involved since i’m programming to an abstraction. I’m curious as to why you don’t make the callback an angular Output instead? Perhaps put a callback and/or Output for changes on the gridster-item component as well?

[ShiftySituation]

I wrote a directive to provide an output…

`import { Directive, Input, OnInit, EventEmitter, Output } from ‘@angular/core’; import { GridsterConfig, GridsterItem, GridsterItemComponentInterface } from ‘angular-gridster2’;

@Directive({ selector: ‘gridster’, }) export class GridsterChangeDirective implements OnInit { // tslint:disable-next-line:no-input-rename @Input(‘options’) options: GridsterConfig; @Output() itemChanged = new EventEmitter<GridsterItem>();

ngOnInit() {
    this.options.itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
        this.itemChanged.emit(item);
    };
}

} `

[tiberiuzuld]

Feature released in 12.1.0 Work done by @legrottagliegionata