If you are using Angular2, use `ngForTrackBy` in ngFor...PLEASE!

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2</title>
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <body>
    <demo-app>Loading...</demo-app>
  </body>
</html>

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
  pipes: []
})
export class AppComponent {
  constructor() { 
    this.counter = false;
    this.responseMock = [
      [
        {id: 1, name: 'Josh'},
        {id: 2, name: 'Joseph'},
        {id: 3, name: 'Kevin'}
      ],
      [
        {id: 1, name: 'Michael'},
        {id: 2, name: 'Frank'},
        {id: 3, name: 'Lian'}
      ]  
    ];
    

    var itemsMock = this.getItems();
    this.items = itemsMock;
    this.itemsTrackBy = itemsMock;

    var self = this;
    setInterval(function() {
      var itemsMock = self.getItems();
      self.items = itemsMock;
      self.itemsTrackBy = itemsMock;
    }, 5000);
  }

  getItems() {

    if (this.counter === false) {
      this.counter = true;
      return this.responseMock[0];
    }
    this.counter = false;
    return this.responseMock[1];
  }

  personIdentity( index, item ) {
    console.log( "TrackBy:", item.item, "at index", index );
    return( item.id );
  }

}


<h1>Angular 2 ngFor demo</h1>

<p>If you like to take a look in this implementation using Angular 1, please <a href="http://embed.plnkr.co/vIZP3U/">Take a look in this example</a></p>
<p>This is the Angular2 example with ngFor with track by.</p>
<p>Make sure that you are using track by in your app because we have the same behaviour that we had in Angular1.</p>
<p>Take a look in the examples.</p>
<h2>With track by</h2>
<ul>
  <li *ngFor="let itemTrackBy of itemsTrackBy; trackBy:personIdentity">
    {{itemTrackBy.id}} | {{itemTrackBy.name}}
  </li>
</ul>
<h2>Without trackBy</h2>
<p>Without `ngForTrackBy` the element is removed into DOM.</p>
<p>If you are not passing trackBy, your component will be removed into the DOM and rendered again.</p>
<ul>
  <li *ngFor="let item of items">
    {{item.id}} | {{item.name}}
  </li>
</ul>

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {
  //map tells the System loader where to look for things
  var  map = {
    'app':                               'app',
    'rxjs':                              'https://npmcdn.com/rxjs@5.0.0-beta.6',
    '@angular/common':                   'https://npmcdn.com/@angular/common@2.0.0-rc.5',
    '@angular/compiler':                 'https://npmcdn.com/@angular/compiler@2.0.0-rc.5',
    '@angular/core':                     'https://npmcdn.com/@angular/core@2.0.0-rc.5',
    '@angular/http':                     'https://npmcdn.com/@angular/http@2.0.0-rc.5',
    '@angular/platform-browser':         'https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5',
    '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5',
    '@angular/router':                   'https://npmcdn.com/@angular/router@3.0.0-rc.1',
    '@angular/forms':                    'https://npmcdn.com/@angular/forms@0.3.0'
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                               { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                              { defaultExtension: 'js' },
    '@angular/common':                   { main: 'index.js', defaultExtension: 'js' },
    '@angular/compiler':                 { main: 'index.js', defaultExtension: 'js' },
    '@angular/core':                     { main: 'index.js', defaultExtension: 'js' },
    '@angular/http':                     { main: 'index.js', defaultExtension: 'js' },
    '@angular/platform-browser':         { main: 'index.js', defaultExtension: 'js' },
    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
    '@angular/router':                   { main: 'index.js', defaultExtension: 'js' },
    '@angular/router-deprecated':        { main: 'index.js', defaultExtension: 'js' },
    '@angular/upgrade':                  { main: 'index.js', defaultExtension: 'js' },
    '@angular/forms':                    { main: 'index.js', defaultExtension: 'js' }
  };

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);
})(this);

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

browserDynamicPlatform().bootstrapModule(AppModule);

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}