How to Remove Two Way Data Binding in Angular -2/4

Question

I am developing a Multi Select dropdown in Angular which also has search. That is when I am parsing the input given from the input field through my master data and displaying only the filtered contents in the DOM. This is my function:

modifyFilter(value: any) {
        console.log('value', value); //The value passed from DOM
        this.filterContent = this.catalogManufacturerNames; /******/
        for(let i=0; i<this.catalogManufacturerNames.length;i++) {
         /* Search catalogManufacturerNames for the value and splice all
         filterContent not having the matching value */    
        }
    }

The problem with the code is that everytime the modifyFilter method is called the catalogManufacturerNames is also changed along with the filterContent . So every time I call modifyFilter , the row marked by /******/ the filterContent gets assigned to the previous filterContent than the global and presumably unchanged catalogManufacturerNames . I think the problem is that filterContent and catalogManufacturerNames get two way binded, but I do not know how to modify it to my requirements. Or is there any other way to go about it. Suggestions are welcome.

Answer 1

In this case you have to use Object.assign OR DeepCopy . It will create a copy of your object/variable so when ever you perform any filter on primary object it will not reflect in copied object and vice versa.

You can use {},[] as per your requirement.

{}: for single object

[]: for collection of objects

let copiedItem = Object.assign({}, copiedItem , PrimaryItem );

Please refer for detail: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Option: 2 Deep Copy

DeepCopy(obj: any): any {
  let clonedObject;

  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (obj instanceof Array) {
    clonedObject = [];
    for (let i = 0; i < obj.length; i++) {
      clonedObject[i] = this.deepCopy(obj[i]);
    }
    return clonedObject;
  }
  if (obj instanceof Date) {
    clonedObject = new Date(obj.valueOf());
    return clonedObject;
  }
  if (obj instanceof RegExp) {
    clonedObject = RegExp(obj.source, obj.flags);
    return clonedObject;
  }
  if (obj instanceof Object) {
    clonedObject = new obj.constructor();
    for (const attr in obj) {
      if (obj.hasOwnProperty(attr)) {
        clonedObject[attr] = this.deepCopy(obj[attr]);
      }
    }
    return clonedObject;
  }
}

Call from component

let copiedItem: any[] = this.DeepCopy(PrimaryItem );

Answer 2

As a simpler alternative to using Object.assign , you can use the spread operator to copy the properties of the double-bound object to another:

this.filterContent = {...this.catalogManufacturerNames};

Reference: http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

Answer 3

Suppose if you have a variable called "a" having value "apple" and variable called "b" to which you want to assign a value of "a" and you don't want any future change of "b" affects "a" then simply use the code below

var b=Object.assign(a); //This will stop two-way binding which means any change in b doesn't impact a