Angular-gridster2: Gridster binds a variable that is not it's datasource

[leandro-ali-elel]

Hi there, first and foremost I know this title sounds weird but I'm having some crazy problems and I don't know how to fix them, furthermore I don't know if this is related to this library or if it's my fault and I am doing something wrong.

I want to explain the issue i'm facing showing you my current code first:

```
getUser() {
let getUser = this._usersService.getOne(this.UserID).subscribe(res => {
this.user = res;
this.dashboard = this.user.configuration.dashboard;
);

So dashboard is the datasource of gridster.

`    <gridster-item [item]="item" *ngFor="let item of dashboard">
`

Quite simple so far.
So, I was requested to make a "reset" button, and I did think that this.user.configuration.dashboard would be useful for this purpose:

reset(){
this.dashboard = this.user.configuration.dashboard;
}
```
But it doesn't work. The problem is that this.user.configuration.dashboard is "binded" to the grid, and when the grid changes so does it, so, basically, the two variables are the same and both of them change when I reorder the grid.

If I code:

this.dashboard = []

then the grid is empty. If I code:

this.user.configuration.dashboard = []

then the grid is unaffected.

I've tried to create a new var called dashboardDefault = this.user.configuration.dashboard, but it also binds to the grid and changes when the grid changes.

Any help or suggestion is very welcomed as I don't have the foggiest idea about what this could be. I believe that I can make defaultGrid a const as some workaround, but I feel like I'm missing something.
Thanks in advance, I'll try to provide further information if needed.

[CollinGraf314]

So the binding of this.dashboard to the gridster element is a one-way binding, so any manipulations of the grid from the UI should not affect this.dashboard in any way. If you are saving your UI changes to this.dashboard in another function, then I believe your problem is simply that this.dashboard is a reference to this.user.configuration.dashboard rather than a deep copy of it. A very simple way to make sure that this.dashboard is a deep copy is to use the line this.dashboard = this.user.configuration.dashboard.slice(); when you initialize its value. Here is a stackblitz that should hopefully shed a little light on your problem. If not please let me know and I can assist you further.

https://stackblitz.com/edit/angular-9ts7rb

[leandro-ali-elel]

So the binding of this.dashboard to the gridster element is a one-way binding, so any manipulations of the grid from the UI should not affect this.dashboard in any way. If you are saving your UI changes to this.dashboard in another function, then I believe your problem is simply that this.dashboard is a reference to this.user.configuration.dashboard rather than a deep copy of it. A very simple way to make sure that this.dashboard is a deep copy is to use the line this.dashboard = this.user.configuration.dashboard.slice(); when you initialize its value. Here is a stackblitz that should hopefully shed a little light on your problem. If not please let me know and I can assist you further.

Hi, thanks for answering! I was checking the stackblitz and the reset button worked only when I deleted some elements, but when I resized an element and clicked the reset button, they didn't come back to their original sizes; moreover, they didn't get back to their original positions neither. I do not know if this is an expected behaviour or if I am doing something wrong. I'm trying to figure out what's happening but I'm really clueless... I mean, this.initialItems objects shouldn't be affected by grid's changes, I am right? Thanks again for your kindness.

[CollinGraf314]

I see my mistake. The .slice() method creates a deep copy of the array, however the array is just a bunch of references to objects, so the objects inside that array were not getting deeply copied. Anyways, you can use something like this.dashboard = JSON.parse(JSON.stringify(this.user.configuration.dashboard)); or any other method of creating a true deep copy that you prefer in order to get the desired functionality.

Here is the stackblitz working and using JSON.parse(JSON.stringify()):
https://stackblitz.com/edit/angular-8a7ecs

[leandro-ali-elel]

Absolutely wonderful, now it works! No doubts this is going to be helpful for a lot of people. Also I've learned about shallow copies and arrays; and I am a little better programmer thanks to you. Thanks for educating me and for solving my problem.