Faster rendering of data angular2

Question

I have been trying to figure out to how best use angular2 for faster data rendering, while using Edge F12 profiler it looks like there is way too much happening and usually it takes somewhere between 250-500ms (on an core i7u cpu) to render a list of 20 items.

Angular2 is said to be much faster than the original Angular version which I cannot really see and it seems weird that the http request to query the data is so much faster than the rendering of it.

What can I do to make this faster? I have tried to change ChangeDetectionStrategy but it doesnt really help. What I do think is the problem is that Angular2 seems to add element after element instead of rendering row after row or even after the full result is calculated.

Here is the html:

<table class="table table-striped table-bordered">
<thead>
    <tr>
        <th class="checkbox-col"><input type="checkbox" [(ngModel)]="checkAll" (ngModelChange)="toggleCheckboxes()" /></th>
        <th>Number</th>
        <th>Area</th>
        <th *ngIf="tableOptions.showOwner" class="visible-md visible-lg">Owner</th>
        <th *ngIf="tableOptions.showUser" class="visible-lg">User</th>
        <th *ngIf="tableOptions.showSentDate" class="visible-xl">Sent </th>
        <th *ngIf="tableOptions.showEndDateUser" class="visible-xl">End date</th>
        <th *ngIf="tableOptions.showEndDateOwner" class="visible-xl">End date</th>
        <th *ngIf="tableOptions.showSignedDate" class="visible-xl">Signed</th>
        <th *ngIf="tableOptions.showTime1" class="visible-lg">Time 1</th>
        <th *ngIf="tableOptions.showTime2" class="visible-lg">Time 2</th>
        <th *ngIf="tableOptions.showCompany">Company</th>
        <th *ngIf="tableOptions.showStatus">Status</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let evaluation of evaluations">
        <td>
            <input type="checkbox" [(ngModel)]="evaluation.checked" *ngIf="evaluation.showCheckbox" (click)="evaluationCheckboxClicked()"
            />
        </td>
        <td>
            <a [routerLink]="['/evaluationDetails', {evaluationId: evaluation.evaluationId}]">
                {{evaluation.number}}
            </a>
        </td>
        <td>
            <a [routerLink]="['/evaluationDetails', {evaluationId: evaluation.evaluationId}]">
                {{evaluation.area | jsonTranslate}}
            </a>
        </td>
        <td *ngIf="tableOptions.showOwner" class="visible-md visible-lg">
            {{evaluation.ownerName}}
        </td>
        <td *ngIf="tableOptions.showUser" class="visible-lg">
            {{evaluation.userName}}
        </td>
        <td *ngIf="tableOptions.showSentDate" class="visible-xl">
            {{evaluation.sent | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showEndDateUser" class="visible-xl">
            {{evaluation.endDateUser | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showEndDateOwner" class="visible-xl">
            {{evaluation.endDateOwner | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showSignedDate" class="visible-xl">
            {{evaluation.signedDate | date:'yyyy-MM-dd'}}
        </td>
        <td *ngIf="tableOptions.showTime1" class="visible-lg">
            {{evaluation.time1}}
        </td>
        <td *ngIf="tableOptions.showTime2" class="visible-lg">
            {{evaluation.time2}}
        </td>
        <td *ngIf="tableOptions.showCompany">
            {{evaluation.companyName}}
        </td>
        <td *ngIf="tableOptions.showStatus">
            {{evaluation.status}}
        </td>
    </tr>
</tbody>
</table>

Answer 1

Try this:

<tr *ngFor="let evaluation of evaluations; trackBy: trackByFn">

and in your component:

trackByFn(index, evaluation) {
  return index;  // or evaluation.evaluationId
}

With trackBy Angular should append rows instead of rebuilding all of them.