Gridster 2 - EmptyCellClickCallback Can't Access Component Objects - Angular 8

Question

I've wired up gridster2 options to enable clicking via empty cells like this:

 this.options = {       
    enableEmptyCellClick: true,
    emptyCellClickCallback: this.emptyCellClick,
 }

 add(){
   //
 }

emptyCellClick(event: MouseEvent, item: GridsterItem): void {     
     this.add()
}

I get a console error 'this.add is not a function'. I can't even access services passed in via the constructor in my component.

I'm assuming the emptyCellClick callback is getting initialised before the rest of the component but I've no idea how to solve the problem.

I'm using angular 8.2.12 and gridster2.

Answer 1

I think its because of the context of this keyword is different (ie it's not referring to the component class).

Try something like this if possible.

this.options = {       
    enableEmptyCellClick: true,
    emptyCellClickCallback: (event: MouseEvent, item: GridsterItem) => this.emptyCellClick(event: MouseEvent, item: GridsterItem),
 }

OR as you said binding this is also possible