Deep copy an array in Angular 2 + TypeScript

I have an array of objects that is an input. Lets call it content.

When trying to deep copy it, it still has a reference to the previous array.

I need to duplicate that input array, and change one property of the duplicated part.

So long I've tried different methods that weren't successful.

ES6 way:

public duplicateArray() {
  arr = [...this.content] => {x.status = DEFAULT});
  return this.content.concat(arr);

The slice way:

public duplicateArray() {
  arr = this.content.slice(0); => {x.status = DEFAULT});
  return this.content.concat(arr);

In both of them all the objects inside the array have status: 'Default'.

What's the best approach to deep copy the array in Angular 2?




let objCopy  = JSON.parse(JSON.stringify(obj));

A 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.


This is Daria's suggestion (see comment on the question) which works starting from TypeScript 2.1 and basically clones each element from the array:

this.clonedArray = => ({ ... e }));

Here is my own. Doesn't work for complex cases, but for a simple array of Objects, it's good enough.

  deepClone(oldArray: Object[]) {
    let newArray: any = [];
    oldArray.forEach((item) => {
      newArray.push(Object.assign({}, item));
    return newArray;

you can use use JQuery for deep copying :

var arr =[['abc'],['xyz']];
var newArr = $.extend(true, [], arr);

console.log(arr); //arr still has [['abc'],['xyz']]

Check this:

  let cloned = => Object.assign({}, x));

The only solution I've found (almost instantly after posting the question), is to loop through the array and use Object.assign()

Like this:

public duplicateArray() {
  let arr = [];
  this.content.forEach((x) => {
    arr.push(Object.assign({}, x));
  }) => {x.status = DEFAULT});
  return this.content.concat(arr);

I know this is not optimal. And I wonder if there's any better solutions.


This is working for me:

this.listCopy = Object.assign([], this.list);

Alternatively, you can use the GitHub project ts-deepcopy, which is also available on npm, to clone your object, or just include the code snippet below.

 * Deep copy function for TypeScript.
 * @param T Generic type of target/copied value.
 * @param target Target value to be copied.
 * @see Source project, ts-deepcopy
 * @see Code pen
export const deepCopy = <T>(target: T): T => {
  if (target === null) {
    return target;
  if (target instanceof Date) {
    return new Date(target.getTime()) as any;
  if (target instanceof Array) {
    const cp = [] as any[];
    (target as any[]).forEach((v) => { cp.push(v); });
    return any) => deepCopy<any>(n)) as any;
  if (typeof target === 'object' && target !== {}) {
    const cp = { ...(target as { [key: string]: any }) } as { [key: string]: any };
    Object.keys(cp).forEach(k => {
      cp[k] = deepCopy<any>(cp[k]);
    return cp as T;
  return target;


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.