Copy values of objects without binding them

Question

I'd like to copy copy the values of an object (item) to another one (editedItem) to put it into a form and modify it while the original object still is displayed unchanged.

<a (click)="editedItem=item">Edit</a>

With this approach the two objects are bound, Item changes when the editedItem is modified. Is there a way to just copy the values without binding the objects?

http://stackoverflow.com/questions/34201483/deep-clone-in-typescript-preserving-types — Günter Zöchbauer, Jul 19 '16 at 11:44
This should be more an Angular2-Syntax-Thing than a typescript thing. — Seltsam, Jul 19 '16 at 11:53
No it shouldn't. I don't see a reason why and it's way too complicated and everyone wants something different. — Günter Zöchbauer, Jul 19 '16 at 11:58

score 10 · Answer 1 · answered Jul 19 '16 at 12:17

10

You can use JSON.parse(JSON.stringify()) if you don't care about the types.

Here is an example:

HTML

<a (click)="copy()">Edit</a>

TS

copy() {
   this.editedItem = JSON.parse(JSON.stringify(this.item))
}

answered Jul 19 '16 at 12:17

Filip Lauc

2,989
1
17
29

score 2 · Answer 2 · answered Jul 19 '16 at 12:38

2

Well, would liked to have done this without an extra function, but this works.

  <a (click)="toEditItem(item)">Edit</a>

  toEditItem(item) {
      this.editItem= Object.create(item);
  }

answered Jul 19 '16 at 12:38

Seltsam

854
1
7
27

Copy values of objects without binding them

2 Answers2