angular_cdk_virtual_scroll_large_list_rendering.ts

1import {Component, ChangeDetectionStrategy} from '@angular/core';
2import {ScrollingModule} from '@angular/cdk/scrolling';
3
4/** @title Basic virtual scroll */
5@Component({
6  selector: 'cdk-virtual-scroll-overview-example',
7  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
8  templateUrl: 'cdk-virtual-scroll-overview-example.html',
9  standalone: true,
10  imports: [ScrollingModule],
11  changeDetection: ChangeDetectionStrategy.OnPush,
12})
13export class CdkVirtualScrollOverviewExample {
14  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
15}
16
17/** 
18 * Corresponding HTML (cdk-virtual-scroll-overview-example.html):
19 * <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
20 *   <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
21 * </cdk-virtual-scroll-viewport>
22 * 
23 * Corresponding CSS (cdk-virtual-scroll-overview-example.css):
24 * .example-viewport {
25 *   height: 200px;
26 *   width: 200px;
27 *   border: 1px solid black;
28 * }
29 * .example-item {
30 *   height: 50px;
31 * }
32 */