angular2: how to copy object into another object

Please help me in order to copy the object into another object using angular 2?

In angular, I used angular.copy() to copy objects to the loose reference of the old objects. But, when I used the same in angular 2 getting below error:

Error: angular is not defined.

Solution 1:

Solution

Angular2 developed on the ground of modern technologies like TypeScript and ES6.

So you can just do let copy = Object.assign({}, myObject).

Object assign - nice examples.

For nested objects : let copy = JSON.parse(JSON.stringify(myObject))

Solution 2:

let copy = Object.assign({}, myObject).  as mentioned above

but this wont work for nested objects. So an alternative would be

let copy =JSON.parse(JSON.stringify(myObject))

Solution 3:

As suggested before, the clean way of deep copying objects having nested objects inside is by using lodash's cloneDeep method.

For Angular, you can do it like this:

Install lodash with yarn add lodash or npm install lodash.

In your component, import cloneDeep and use it:

import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);

It's only 18kb added to your build, well worth for the benefits.

I've also written an article here, if you need more insight on why using lodash's cloneDeep.

Solution 4:

You can do in this in Angular with ECMAScript6 by using the spread operator:

let copy = {...myObject};

Solution 5:

let course = {
  name: 'Angular',
};

let newCourse= Object.assign({}, course);

newCourse.name= 'React';

console.log(course.name); // writes Angular
console.log(newCourse.name); // writes React

For Nested Object we can use of 3rd party libraries, for deep copying objects. In case of lodash, use _.cloneDeep()

let newCourse= _.cloneDeep(course);