Виртуальный Скроллер

import { VirtualScrollerModule } from 'primeng/virtualscroller';

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { LazyLoadEvent, SelectItem } from 'primeng/api';
 
export interface Product {
  id?: string;
  code?: string;
  name?: string;
  description?: string;
  price?: number;
  quantity?: number;
  inventoryStatus?: string;
  category?: string;
  image?: string;
  rating?: number;
}
 
@Component({
  selector: 'app-prime-virtualscroller',
  templateUrl: './prime-virtualscroller.component.html',
  styleUrls: ['./prime-virtualscroller.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PrimeVirtualscrollerComponent implements OnInit {
  products: Product[];
  virtualProducts: Product[];
  sortKey = '';
  sortOptions: SelectItem[] = [];
 
  status: string[] = ['OUTOFSTOCK', 'INSTOCK', 'LOWSTOCK'];
 
  productNames: string[] = [
    'Bamboo Watch',
    'Black Watch',
    'Blue Band',
    'Blue T-Shirt',
    'Bracelet',
    'Brown Purse',
    'Chakra Bracelet',
    'Galaxy Earrings',
    'Game Controller',
    'Gaming Set',
    'Gold Phone Case',
    'Green Earbuds',
    'Green T-Shirt',
    'Grey T-Shirt',
    'Headphones',
    'Light Green T-Shirt',
    'Lime Band',
    'Mini Speakers',
    'Painted Phone Case',
    'Pink Band',
    'Pink Purse',
    'Purple Band',
    'Purple Gemstone Necklace',
    'Purple T-Shirt',
    'Shoes',
    'Sneakers',
    'Teal T-Shirt',
    'Yellow Earbuds',
    'Yoga Mat',
    'Yoga Set',
  ];
 
  constructor() {}
 
  ngOnInit(): void {
    this.products = Array.from({ length: 10000 }).map(() => this.generateProduct());
 
    this.sortOptions = [
      { label: 'Cheapest First', value: 'price' },
      { label: 'Expensive First', value: '!price' },
    ];
  }
 
  generateProduct(): Product {
    const product: Product = {
      id: this.generateId(),
      name: this.generateName(),
      description: 'Product Description',
      price: this.generatePrice(),
      quantity: this.generateQuantity(),
      category: 'Product Category',
      inventoryStatus: this.generateStatus(),
      rating: this.generateRating(),
    };
 
    return product;
  }
 
  generateId() {
    let text = '';
    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
    for (var i = 0; i < 5; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
 
    return text;
  }
 
  generateName() {
    return this.productNames[Math.floor(Math.random() * Math.floor(30))];
  }
 
  generatePrice() {
    return Math.floor(Math.random() * Math.floor(299) + 1);
  }
 
  generateQuantity() {
    return Math.floor(Math.random() * Math.floor(75) + 1);
  }
 
  generateStatus() {
    return this.status[Math.floor(Math.random() * Math.floor(3))];
  }
 
  generateRating() {
    return Math.floor(Math.random() * Math.floor(5) + 1);
  }
 
  loadCarsLazy(event: LazyLoadEvent) {
    // simulate remote connection with a timeout
    setTimeout(() => {
      //load data of required page
      let loadedProducts = this.products.slice(event.first, event.first + event.rows);
 
      //populate page of virtual cars
      Array.prototype.splice.apply(this.virtualProducts, [...[event.first, event.rows], ...loadedProducts]);
 
      //trigger change detection
      this.virtualProducts = [...this.virtualProducts];
    }, 1000);
  }
 
  onSortChange() {
    if (this.sortKey.indexOf('!') === 0) this.sort(-1);
    else this.sort(1);
  }
 
  sort(order: number): void {
    let products = [...this.products];
    products.sort((data1, data2) => {
      let value1 = data1.price;
      let value2 = data2.price;
      let result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
      return order * result;
    });
 
    this.products = products;
  }
}

<p-virtualScroller [value]="cars" scrollHeight="500px" [itemSize]="150">
  <ng-template pTemplate="item" let-car>
      Car content
  </ng-template>
</p-virtualScroller>