title: Passing Object by Value (not by ref) over event emitter in Angular 8
body: <p>I have an application, where I have to pass data from child component to parent component. The data is an object.</p>
  
  <p>The problem what I am facing is the data is being passed by ref, which means when my Child Component model data changes, the Parent Component Array (this.cashEntryItems) also being changes.</p>
  
  <p>I tried to push some console.log() and but still no luck.</p>
  
  <p><strong>I am receiving the event data correctly but not able to pass data by value only (not linking to the child component object)</strong></p>
  
  <p>Here is the output of my console -</p>
  
  <pre><code>Console.log -&gt; inside Parent Component.ts file
  
  Input From Child Component 
  CashEntryItem {CompOperarator: {…}, description: "test", serviceType: ServiceType, amount: 100, …}
  
  Before Push this.cashEntryItems - 
  []
  
  After Push this.cashEntryItems
  [CashEntryItem]
    0: CashEntryItem {CompOperarator: {…}, description: null, serviceType: ServiceType, amount: null, …}
    length: 1
    __proto__: Array(0)
  
  </code></pre>
  
  <p>I have pasted my code below. </p>
  
  <p><strong>Child Component -</strong></p>
  
  <p><em>Child Component.html</em></p>
  
  <pre><code>&lt;form #itemForm="ngForm" (ngSubmit)="onSubmit()" *ngIf="isPageLoaded"&gt;
  </code></pre>
  
  <p><em>Child Component.ts</em></p>
  
  <pre><code>onSubmit() {
      this.formSubmit.emit(this.cashEntryItem);
    }
  </code></pre>
  
  <p><strong>Parent Component</strong></p>
  
  <p><em>Parent Component.html</em></p>
  
  <pre><code>&lt;app-child-component (formSubmit)="addItem($event)"&gt;&lt;/app-child-component&gt;
  </code></pre>
  
  <p><em>Parent Component.ts</em></p>
  
  <pre><code>  addItem(newItem: CashEntryItem) {
      this.cashEntryItems.push(newItem);
      this.cashEntryItems = this.cashEntryItems.slice(); //one suggestion from a blog - Not working
    }
  </code></pre>