Angular 2 table makes it slow

We have a datasheet component and it's pretty slow in IE 11. It's pretty decent in Chrome. However, our main browser is IE 11, so it should run fast in IE 11.

When I ran the "UI responsive" profiler in IE 11, the biggest cuprite was DomEvent when loading or sorting a table. It has a lot of appendChild, insertBefore commands for td tags, etc., and it takes about 8 seconds for just these DOM manipulations (screenshot below). On Chrome it takes about 2 seconds, which is acceptable.

I have looked at several blogs from angular 1.x where they explained how to optimize a table with a lot of records and try them in angular 2 but no luck so far in IE 11.

I was wondering if there is a way to compile all the lines and just insert them together rather than insert one line after another.

I created a plunkr ( https://plnkr.co/edit/Wqh6RLwT6IP8ijoIpr4a?p=preview ) that also shows the same number of DOM events in the IE 11 profiler report on load.

Any other suggestions would be helpful too.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <button (click)="loadTable()" class="btn btn-primary">Load</button>
    <table class="table">
      <tr *ngFor="let item of items">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </table>
  `,
})
export class App {
  name:string;
  items = [];
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
  
  loadTable() {
    this.items = this.getItems();
  }
  
  private getItems() {
    let items = [];
    for (let i = 0; i < 5000; i++) {
      items.push({ 'id': i, 'name': 'Name' + i })
    }
    return items;
  }
}

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