How to copy object without reference in angular ?

In this tutorial we will learn to copy object without reference in angular. Objects and array are work on reference by address methodology means Objects and array keeps the address means if you change anything in the object or array from anywhere then it will change the value in original object.

Angular is most popular frontend framework and not only in angular even in javascript or other framework we ca land into the same problem so to copy object without reference in angular here is the simplest solution

Copy object / Array in angular

Simplest way to copy a object in angular or javascript is below

let obj=[{"title":"test"}];
let copiedObj = JSON.parse(JSON.stringify(obj));

Here, we copied using json stringify and json parse method, now if you change value in copiedObj it won’t change the values of obj variable

Another way to copy the object we can use Object.assign but it won’t work in case of nested objects

let obj=[{"title":"test"}];
let copy = Object.assign({}, obj)

So as you can we have used two methods here

Object.assign : Used to copy but nested objects not work
JSON.parse and JSON.strigify : Used to copy the object without reference in nested object

Let’s take an example of convert JSON string to JSON object in angular

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 2: Create a Component

Create a component and add json stringify and parse in component

ng g c hello-world

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
})
export class HelloWorldComponent implements OnInit {
  obj:Array<object> = [{"title":"test"},{"title":"test2"}];
  copy: Array<object>;
  copyWithoutRef: Array<object>;
    
  constructor() {
    this.copy = JSON.parse(JSON.stringify(this.obj));
    this.copyWithoutRef=this.obj;
    this.copy[0]['title']="Copied Title";

  }

  ngOnInit() {}
}

Here we used to convet the string to object and object to string.

Step 3 : Create template and add html

Now, add simple html template with a *ngFor

<h2>Copy without reference</h2>

<div *ngFor="let val of copy">
  {{ val.title }}
</div>

<h2>Copy with reference</h2>

<div *ngFor="let val of copyWithoutRef">
  {{ val.title }}
</div>

Live Example and code:

Copy object / Array in angular

Related

Related Posts