How to save gridster-item in Database on Resize / Change in a static function?

Question

After doing some resize/drag actions on my dashboard, I want to save the updated size and position of my changed widget in my MongoDB database. Luckily the gridster library has the posibility to react to dragable and resize Events. But unfortunately they are static, so when I want to save the new values by using my database service, it is not working, because it does not can use it because it is not static.

I used Angular 6 and angular-gridster2 6.0.10.

Has anyone an idea how I can use the resize/drag events to save my data?

---

Here is the code (not runable, because I reduced it a lot):

export class SheetContentComponent implements OnInit {

  constructor(protected databaseService: DatabaseService,
              private dataService: DataService,
              protected projectService: ProjectService) {
  }

  protected widgetType = WidgetType;
  protected project: Project;
  protected currentDashboardId: string;
  protected user: User;
  protected currentSheetId: string;
  protected widgetPosition: GridsterItem;
  protected currentWidgetId: string;

  protected dashboard: Array<GridsterItem>;

  ngOnInit(): void {

    this.options = {
 gridType: GridType.Fit,
      displayGrid: DisplayGrid.Always,
      compactType: CompactType.None,
      margin: 10,
      outerMargin: true,
      minCols: 50,
      maxCols: 200,
      minRows: 50,
      maxRows: 100,
      pushItems: true,
      pushDirections: {north: true, east: true, south: true, west: true},
      pushResizeItems: true,
      swap: true,
      draggable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("dragable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      },
      resizable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("resizeable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      }
    };
  }

  

  /**
   * This method saves the selected options into the database.
   * @param widgetId the id of the widget to save
   * @param value the value
   * @param field the field where to store
   */
  protected saveInDatabase(widgetId: string, value, field: string): void {
    this.databaseService.updateDocument(this.databaseService.WIDGETSCOLLECTION, widgetId, new Fieldvalue(field, value))
      .subscribe(result => {
      }, error => {
        console.log('Error updating database entry ', error);
      });
  }

<gridster  #dashboardgrid [options]="options" class="widget-container" >
  <gridster-item *ngFor="let widget of list" id="widget.id" [id]="widget.id" [item]="widget.position" class="gridster-    design" (mouseup)="enablePointer(widget.id)">
    <!-->more html stuff<-->
  </gridster-item>
</gridster>

I get this error:

Answer 1

this is defined as the current window instance when those function(s) are called You need to change your functions into arrow functions or bind to this. Do this anywhere you define a call back function as function () {.... Example:

draggable: {
    enabled: true,
    stop: (event, $element, widget) => {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }
  }

draggable: {
    enabled: true,
    stop: function (event, $element, widget) {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }.bind(this)
  }