TypeError: Cannot read property 'UpdateXY' of undefined at Object.stop anguar 5

Question

I have a HomeComponent:

@Component({
  selector: 'gridster-general',
  templateUrl: './home.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})

this is the export class, it contains an initialization of a gridster dashboard:

export class HomeComponent implements OnInit {

  options: GridsterConfig;
  dashboard: Array<GridsterItem>;
  widget:any;

  constructor(private dataService:DataService ) 
  { }

  ngOnInit() {
    this.options = {
      gridType: GridType.ScrollVertical,
      compactType: CompactType.None,
      margin:10,
      outerMargin: true,
      outerMarginTop: null,
      outerMarginRight: null,
      outerMarginBottom: null,
      outerMarginLeft: null,
      mobileBreakpoint: 640,
      minCols: 1,
      maxCols: 10,
      minRows: 1,
      maxRows: 100,
      maxItemCols: 100,
      minItemCols: 1,
      maxItemRows: 100,
      minItemRows: 1,
      maxItemArea: 2500,
      minItemArea: 1,
      defaultItemCols: 1,
      defaultItemRows: 1,
      fixedColWidth: 105,
      fixedRowHeight: 105,
      keepFixedHeightInMobile: false,
      keepFixedWidthInMobile: false,
      scrollSensitivity: 10,
      scrollSpeed: 20,
      enableEmptyCellClick: false,
      enableEmptyCellContextMenu: false,
      enableEmptyCellDrop: false,
      enableEmptyCellDrag: false,
      emptyCellDragMaxCols: 50,
      emptyCellDragMaxRows: 50,
      ignoreMarginInRow: false,
      draggable: {
        enabled: true,     
        stop:
        function (event, $element, widget) {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
          HomeComponent.prototype.dataService.UpdateXY(this.widget);
        }

      },...

I used HomeComponent.prototype because i couldn't access the dataService variable with this.dataService

I am trying to get the widget's position in angular 5 gridster and save it in my database. data Service is the service that interacts with my database and UpdateXY() is a function that uses the post method to save the info in the database. I am getting this error :

ERROR TypeError: Cannot read property 'UpdateXY' of undefined
    at Object.stop (home.component.ts:106)
    at GridsterDraggable.dragStop (gridsterDraggable.service.ts:158)
    at HTMLDocument.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLDocument.globalZoneAwareCallback (zone.js:1566)

Can someone please help me solve this issue

Answer 1

Solved it, instead of ;

stop:
        function (event, $element, widget) {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
          HomeComponent.prototype.dataService.UpdateXY(this.widget);
        }

the right format was:

 stop: (event, $element, widget) => {

          this.widget = {
            x:$element.$item.x,
            y:$element.$item.y
          }
       this.dataService.UpdateXY(this.widget);}