Kendo Angular UI - Is there any way to persist the state of the tilelayout and loading it initially?

I am trying to implement a dashboard where the user can add / remove and reorder widgets.

Loading the persisted state should not be a problem since I can create something like this:

<kendo-tilelayout-item *ngFor="let widget of widgets"
                   [title]="widget.title"
                   [col]="widget.col"
                   [order]="widget.order">...</kendo-tilelayout-item>

But how can I persist the state of the tilelayout to my models?

I tried with the reorder event but there I haven't got any information to identify my widget models.

public onReorder(e: TileLayoutReorderEvent): void {
   // Find the model to persist changes
}

Here's how I did it. On the <kendo-tilelayout-item, add a data- attribute using to store the unique id of the data item I'm binding to the kendo-tilelayout-item.

<kendo-tilelayout-item
    [attr.data-setting]="dataItem.id"

In my component, I keep an object called settings used like a typical JS dictionary:

settings: any = {};

When I get the data back from my API call, I put each result back into the object as the ID property:

// loop results when loading...    
this.settings[dataItem.id] = dataItem;

Then I can handle the re-order event:

onReorder(e: TileLayoutReorderEvent) {
  const data: ItemUpdate[] = [];
  e.items.forEach((item) => {
    const r = item.elem as ElementRef;
    const key = r.nativeElement.getAttribute('data-setting');

    data.push({
      id: this.settings[key].id,
      col: item.col,
      row: item.row,
      colSpan: item.colSpan,
      rowSpan: item.rowSpan,
      order: item.order,
    });
  });

  // sort the data      
  // call the API to update
}