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

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 );

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