angular_ng2_vs_for_virtual_scrolling_large_list.ts

1import { Component, NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { VsForModule } from 'ng2-vs-for';
4
5@Component({
6  selector: 'app-root',
7  template: `
8    <div [style.height.px]="400" style="overflow: auto;">
9      <table>
10        <tr *vsFor="items; let _items = vsCollection; scrollParent: 'parent'; itemHeight: 30">
11          <td *ngFor="let item of _items">
12            {{ item }}
13          </td>
14        </tr>
15      </table>
16    </div>
17  `,
18})
19export class AppComponent {
20  items: string[] = [];
21
22  constructor() {
23    for (let i = 0; i < 10000; i++) {
24      this.items.push(`Item ${i}`);
25    }
26  }
27}
28
29@NgModule({
30  imports: [
31    BrowserModule,
32    VsForModule
33  ],
34  declarations: [AppComponent],
35  bootstrap: [AppComponent]
36})
37export class AppModule { }