title: How can I speed up ngFor for a large array?
body: <p>I'm working on a <a href="https://thepoke.de/x/" rel="noreferrer">Pokedex site</a> and thanks to there now being 721 Pokemon an ngFor is taking a long time to display all the entries the first time. Once I have all the data loaded it seems to be taking ~2400ms to actually put them in the DOM.</p>
  
  <p>Here's the ngFor in question:</p>
  
  <pre><code>&lt;entry *ngFor="let p of (pokedex | filter:search:SelectedVer), let i = index, let last = last"
      [id]="'pokemon-entry-' + p.id"
      [pokemon]="p"
      [language]="SelectedLang"
      (click)="SelectPokemon(p)"&gt;&lt;/entry&gt;
  </code></pre>
  
  <p>I ran a timeline in Chrome's dev tools and got something that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/v5d7W.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v5d7W.png" alt="Timeline of MaterialPokedex.com loading up"></a></p>
  
  <p>I don't have much experience with the timeline but it seems to me that there's way too big a block right there in the middle (the top is labeled <code>XHR Load (/csv/pokemon_game_indices.csv)</code>). The ajax call itself takes 0.02 ms according to the timeline. I'm assuming what makes this such a large block is the change detection that happens after the ajax request is complete. That's when I take my models that I've been building and put them in the <code>pokedex</code> variable that the ngFor uses above. My understanding of the timeline is that the construction of the 721 DOM elements to be added by the ngFor is taking about 2.5s to complete.</p>
  
  <p>I did try un-componentizing my <code>entry</code> component into just the html (the component really doesn't do anything) but that doesn't seem to impact the time in any noticeable way. Removing the pipe I use to filter the list also doesn't impact the time.</p>
  
  <p>Is there a way to speed up this ngFor?</p>
  
  <p>I'm using Angular 2 RC1. I am enabling prod mode. I'm running this in Chrome 51.0.2704.79 m</p>