title: Angular - ngFor performance issues
body: <p>I have a video application written in Angular 4. In this app, user can add a video and subtitles, and edit the videos captions on a list. the captions in list are always synced with the video current play time. When video current time change, the list viewport is changed in order to display the current caption. 
  The number of captions always stay the same, user can not add or remove items only edit the caption text.
  When having many captions (>500) the app is working very very slowly.
  I thought about creating and destroying items in the ngFor according to the list viewport, but it seems to be to much work. 
  Is there a better solution (Not using pagging)
  [![</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Caption } from './caption';
  
  export class Translation {
      public sourceCaption: Caption;
      public targetCaption: Caption;
  
      constructor(sourceCaption: Caption, targetCaption: Caption) {
          this.sourceCaption = sourceCaption;
          this.targetCaption = targetCaption;
      }
  
      get startTime() {
          return this.sourceCaption &amp;&amp; this.sourceCaption.startTime;
      }
  
      get endTime() {
          return this.sourceCaption &amp;&amp; this.sourceCaption.endTime;
      }
  }
  
  
  export class Caption{
      public startTime: number;
      public endTime: number;
      public text: Array&lt;string&gt;; 
      public id: String;
      public isFlag: Boolean;
      public isItalic: Boolean;
      public languageId: String;
      public clientId: String;
  
      constructor(clientId: String, languageId: String, id?: String, startTime?: number, endTime?: number, text?: Array&lt;string&gt;, isFlag?:Boolean, isBold?:Boolean, isItalic?: Boolean ) {
          this.id = id;
          this.clientId = id || clientId;
          this.startTime = startTime;
          this.endTime = endTime;
          this.text = text || new Array&lt;string&gt;();
          this.isFlag = isFlag;
          this.languageId = languageId;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--list--&gt;
  
  &lt;div class="tt-translations-list"&gt;
    &lt;tt-translation-list-header&gt;&lt;/tt-translation-list-header&gt;
    
    &lt;div class="tt-translation-list-items-container" #container&gt;
      &lt;div class="tt-translation-list-item-container" 
          *ngFor="let translation of translations; trackBy:i; let i = index" 
          (click)="setEditMode(translation)"&gt;
  
          &lt;tt-translations-list-item [index]="i"
                                     [translation]="translation"&gt;
          &lt;/tt-translations-list-item&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;!--list-item--&gt;
  
  &lt;div class="tt-translations-list-item"
       #container
       [ngClass]="{'selected-row': isEditMode}"&gt; 
  
       &lt;div class="tt-translations-list-item-border-container"
            [ngClass]="{'visible': isEditMode}"&gt;
       &lt;/div&gt;
  
       &lt;div class="tt-translations-list-item-source-caption-container"&gt;
         &lt;div class="source-caption-header"&gt;
            &lt;tt-translations-list-item-header [caption]="translation.sourceCaption"
                                              [index]="index"&gt;
            &lt;/tt-translations-list-item-header&gt;
         &lt;/div&gt;
  
         &lt;div class="source-caption-content-container"
              dir="auto"&gt;
            &lt;span *ngFor="let line of translation?.sourceCaption?.text"&gt;
                {{line}}
            &lt;/span&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class="tt-translations-list-item-target-caption-container"&gt;
         &lt;div class="target-caption-content-container"&gt;
            &lt;tt-target-caption-editor [editCaption]="translation.targetCaption"&gt;
            &lt;/tt-target-caption-editor&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
          
    </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/GrThW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GrThW.png" alt="][1]"></a>]<a href="https://i.stack.imgur.com/T4OCR.png" rel="nofollow noreferrer">2</a></p>