title: Angular2 - ngFor directive does not map the removed item
body: <p>I have an Item container and item pattern where the child items shoud be added and removed from its container. Adding is fine while remove does nothing. It seems that the angular2  *ngFor directive does  not work when any of the child items removed. </p>
  
  <pre><code>    import { NgFor} from 'angular2/common';
      import { bootstrap } from 'angular2/platform/browser';
      import { Component, View, Directive, OnDestroy, Input, enableProdMode } from 'angular2/core';
      import { CORE_DIRECTIVES} from 'angular2/common';
  
  
      @Component({selector: 'itemcontainer',})
      @View({ template: `&lt;ul (click)="$event.preventDefault()"&gt;
                         &lt;li *ngFor="#it of items"&gt;Any Item&lt;/li&gt;
                         &lt;/ul&gt;
                         &lt;div&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`,
  
              directives: [NgFor],
      })
      export class ItemContainer {
          public items: Array&lt;Item&gt; = [];
  
          public addItem(item: Item) {
              this.items.push(item);
          }
  
          public removeItem(item: Item) {
              var index = this.items.indexOf(item);
              if (index === -1) {
                  return;
              }
  
              console.log(`Index about to remove: ${index} this.items length: ${this.items.length}`);
              this.items.slice(index, 1);
              console.log(`this.items length: ${this.items.length}`);
          }
      }
  
      @Directive({ selector: 'item' })
      export class Item implements OnDestroy {
  
          @Input() public heading: string;
  
          constructor(public itemcontainer: ItemContainer) {
              this.itemcontainer.addItem(this);
          }
  
          ngOnDestroy() {
              this.itemcontainer.removeItem(this);
          }
      }
  
      @Component({
          selector: 'my-app'
      })
      @View({
          template: `&lt;div (click)="$event.preventDefault()"&gt;
              &lt;button type="button" (click)="addItem()"&gt;Add item&lt;/button&gt;
              &lt;button type="button" (click)="removeItem()"&gt;Remove item&lt;/button&gt;
  
          &lt;itemcontainer&gt;
              &lt;item *ngFor="#containerItem of containerItems" [heading]="containerItem.title"&gt;Content &lt;/item&gt;
          &lt;/itemcontainer&gt;
      &lt;/div&gt;`,
  
          directives: [CORE_DIRECTIVES, Item, ItemContainer],
  
      })
  
      class Tester {
  
          private counter: number = 2;
  
          public containerItems: Array&lt;any&gt; = [
              { title: 'Item1' },
              { title: 'Item2' },
          ];
  
          addItem() {
              this.containerItems.push({ title: `Item ${this.counter}` });
          }
  
          removeItem() {
  
              if (this.containerItems.length &gt; 0) {
                  this.containerItems.splice(this.containerItems.length - 1, 1);
              }
          }
      }
  
      enableProdMode();
      bootstrap(Tester);
  </code></pre>
  
  <p>Here is the DOM look like after two new items added and removed:</p>
  
  <pre><code>    &lt;itemcontainer&gt;
          &lt;ul&gt;
              &lt;li&gt;Any Item&lt;/li&gt;
              &lt;li&gt;Any Item&lt;/li&gt;
              &lt;li&gt;Any Item&lt;/li&gt;
              &lt;li&gt;Any Item&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div&gt;
              &lt;item&gt;Content &lt;/item&gt;
              &lt;item&gt;Content &lt;/item&gt;
          &lt;/div&gt;
      &lt;/itemcontainer&gt;
  </code></pre>
  
  <p>The issue is the li part does not removed. Any idea?</p>
  
  <p>(I tested it with angular 2.0.0-beta.3 and 2.)</p>