You use angular. copy() to an object to prevent other code from modifying it. The original object might change, but your copy won't see the changes. You can reinstate the copy if needed.
cloneDeep() method is used to create a deep copy of the value i.e. it recursively clones the value.
A shallow copy means that certain sub-values are still connected to the original variable.
Assuming you are using ES6, you can use var copy = Object.assign({}, original)
. Works in modern browsers; if you need to support older browsers check out this polyfill
update:
With TypeScript 2.1+, ES6 shorthand object spread notation is available:
const copy = { ...original }
Till we have a better solution, you can use the following:
duplicateObject = <YourObjType> JSON.parse(JSON.stringify(originalObject));
EDIT: Clarification
Please note: The above solution was only meant to be a quick-fix one liner, provided at a time when Angular 2 was under active development. My hope was we might eventually get an equivalent of angular.copy()
. Therefore I did not want to write or import a deep-cloning library.
This method also has issues with parsing date properties (it will become a string).
Please do not use this method in production apps. Use it only in your experimental projects - the ones you are doing for learning Angular 2.
The alternative for 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 { cloneDeep } from "lodash";
...
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.
For shallow copying you could use Object.assign which is a ES6 feature
let x = { name: 'Marek', age: 20 };
let y = Object.assign({}, x);
x === y; //false
DO NOT use it for deep cloning
Use lodash as bertandg indicated. The reason angular no longer has this method, is because angular 1 was a stand-alone framework, and external libraries often ran into issues with the angular execution context. Angular 2 does not have that problem, so use whatever library that you want.
https://lodash.com/docs#cloneDeep
If you want to copy a class instance, you can use Object.assign too, but you need to pass a new instance as a first parameter (instead of {}) :
class MyClass {
public prop1: number;
public prop2: number;
public summonUnicorn(): void {
alert('Unicorn !');
}
}
let instance = new MyClass();
instance.prop1 = 12;
instance.prop2 = 42;
let wrongCopy = Object.assign({}, instance);
console.log(wrongCopy.prop1); // 12
console.log(wrongCopy.prop2); // 42
wrongCopy.summonUnicorn() // ERROR : undefined is not a function
let goodCopy = Object.assign(new MyClass(), instance);
console.log(goodCopy.prop1); // 12
console.log(goodCopy.prop2); // 42
goodCopy.summonUnicorn() // It works !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With