Example of Virtualization in Angular ListView Component

This sample demonstrates the default functionalities of UI virtualization. Scroll list item to experience UI virtualization.

Contacts
  • NNancy
  • AAndrew
  • JJanet
  • Margaret
  • SSteven
  • Laura
  • RRobert
  • MMichael
  • Albert
  • NNolan
  • Laura
  • NNolan
  • Margaret
  • RRobert
  • Margaret
  • SSteven
  • Albert
  • Laura
  • NNolan
  • Laura
  • AAndrew
  • Margaret
  • Albert
  • Margaret
  • RRobert
  • Laura
  • MMichael
  • Laura
  • MMichael
  • Albert
  • NNolan
  • SSteven
  • NNancy
  • Albert
  • RRobert
  • Laura
  • MMichael
  • Laura
  • SSteven
  • NNancy
  • NNolan
  • MMichael
  • Margaret
  • JJanet
  • SSteven
  • NNancy
  • Laura
  • JJanet
  • MMichael
  • AAndrew
  • MMichael
  • NNancy
  • SSteven
  • RRobert
  • AAndrew
  • MMichael
  • NNancy
  • RRobert
  • NNolan
  • Margaret
  • NNancy
  • SSteven
  • MMichael
  • SSteven
  • Laura
  • JJanet
  • Margaret
  • JJanet
  • NNolan
  • MMichael
  • SSteven
  • JJanet
  • Laura
  • RRobert
  • SSteven
  • RRobert
  • NNolan
  • Margaret
  • NNolan
  • Laura
  • NNolan
  • RRobert
  • Laura
  • SSteven
  • Margaret
  • Laura
  • SSteven
  • Margaret
  • NNolan
  • Albert
  • NNancy
  • Margaret
  • RRobert
  • Laura
  • RRobert
  • Margaret
  • NNancy
  • NNolan
  • AAndrew
  • SSteven
  • Albert
  • Margaret
  • Laura
  • Albert
  • AAndrew
  • Laura
  • MMichael
  • Albert
  • SSteven
  • RRobert
  • Albert
  • Margaret
  • NNolan
  • JJanet
Description

UI virtualization is an optimization technique to avoid unnecessarily constructing and rendering objects for list items by loading only visible list items in a view port. This helps improve ListView performance when loading a large number of items. The list items are updated dynamically while users scroll the list. The virtualization can be enabled by using the enableVirtualization API in Listview.

Properties
Load data
Time taken
28 ms