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?

Answer 1

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))
}

Answer 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);
  }