title: Angular2 how to delete element in ngFor
body: <p>How can I delete an element from an <code>ngFor</code>? I have this <code>ngFor</code> of items which has an <code>Id</code> as well which I'm passing in the <code>updateOrder()</code> function so It'd know which item I'm clicking.</p>
  
  <pre><code>getOrdersFromOrigin() {
      this.sharedService.getOriginSite()
        .subscribe(data =&gt; {
          this.isLoading = false;
          this.orderPreparing = data.Results
        })
    }
  
  &lt;div class="preparing" *ngFor="let prepare of orderPreparing"&gt;
   &lt;p&gt; {{ prepare.Item }} &lt;/p&gt;
   &lt;button class="btn btn-primary" (click)="updateOrder(prepare.Id)"&gt;It's Ready&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my <code>updateOrder</code> I don't have anything in my updateOrder function as I'm not sure how to delete an element relative to the <code>Id</code> I pass in the <code>(click)=""</code> event, it's giving me the <code>Id</code> just fine.</p>
  
  <p>This <code>updateOrder()</code> is working as it removes it from the UI, but the idea is once its remove I want to add it to a collection.</p>
  
  <pre><code>updateOrder(id) {
      for(let i = 0; i &lt; this.orderPreparing.length; i++) {
    if (this.orderPreparing[i].Id === id) {
        this.orderPreparing.splice(i, 1);
        this.addToCollection.push(this.orderPreparing[i]);
        console.log(this.addToCollection);
        console.log('Changed Status to AwaitingToPick');
        break;
    }
  }
    }
  </code></pre>
  
  <p>I've added a new <code>private addToCollection = []</code> to push the removed <code>item</code> to an array so I can add it in the collection. However the code above only takes the last <code>index</code> when I add another one to the array it breaks the array becomes <code>[Object{}, undefined]</code></p>