title: Push object into array in Angular
body: <p>I have the problem with pushing object into array. I have array with objects inside. This component print it:</p>
  
  <pre><code>&lt;div class="row"
    *ngFor="let element of dietList"&gt;
  {{element.name}} {{ element.weight }}
  &lt;/div&gt;
  </code></pre>
  
  <p>Second add object to array but I would have possibility to add various type of object like: rice, chicken and so on. So I have created other array with object inside. This array don't contains wieght becouse user would have possibility to check his own value. So into second component I print name of product and input with local refference</p>
  
  <pre><code>&lt;div *ngFor="let product of products"&gt;
    {{ product.name }}&lt;input type="text" #weight&gt;
    &lt;button class="btn btn-primary" (click) = "onAddNewElement(product, weight.value)"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>onAddNewElement() method is very simple:</p>
  
  <pre><code>  onAddNewElement(element, weight){
      let newElement = element;
      newElement.weight = weight;
      this.dietService.newElement(newElement);
    }
  </code></pre>
  
  <p><code>newElement()</code> method pushing object into array.</p>
  
  <pre><code>  newElement(element){
      PRODUCTS.push(element);
    }
  </code></pre>
  
  <p>It works but not like I want. When I add my first element everything is ok, but when I add next element values of first element is going to overwrite.
  Example: In first step  I checked weight input on 120g (chicken for example). In second step I checked weight on 200g. In result 2 elements I going to weight value on 200g. First value every time is overwrite. </p>