title: Optimizing large Angular table grid
body: <p>I am having performance issues when trying to display a grid of editable inputs. It starts to get really slow at around 200 rows and 10 columns. (using Angular 4.4)</p>
  
  <pre><code>&lt;tr *ngFor="let row of rows"&gt;
    &lt;td *ngFor="let column of columns"&gt;
      &lt;ng-container [ngSwitch]="column.columnType"&gt;
        &lt;ng-template [ngSwitchCase]="0"&gt;
          &lt;input [(ngModel)]="row[column.index].value" ...&gt;
        &lt;/ng-template&gt;
        &lt;ng-template [ngSwitchCase]="1"&gt;
          &lt;select ...&gt;
        &lt;/ng-template&gt;
        &lt;ng-template [ngSwitchCase]="2"&gt;
          &lt;span ...&gt;
        &lt;/ng-template&gt;
        &lt;ng-template [ngSwitchCase]="..."&gt;
          &lt;div ...&gt;
        &lt;/ng-template&gt;
        &lt;ng-template [ngSwitchCase]="15"&gt;
          &lt;a href ...&gt;
        &lt;/ng-template&gt;
      &lt;/ng-container&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>There is a lot of time taken (according to the Chrome profiler - debugUpdateDirectives) in the switch statement as well as . Any ideas on how to reduce this?</p>