--- title: Multifunctional lists for Angular | daily.dev description: ng-virtual-list is an open-source Angular library (v X.12.X, supporting Angular 14-22) for high-performance virtualized list rendering. It supports fixed-size... canonical: https://daily.dev/posts/multifunctional-lists-for-angular-n9lhhrrqb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Multifunctional lists for Angular | daily.dev og:description: ng-virtual-list is an open-source Angular library (v X.12.X, supporting Angular 14-22) for high-performance virtualized list rendering. It supports fixed-size... og:url: https://daily.dev/posts/multifunctional-lists-for-angular-n9lhhrrqb og:image: https://api.daily.dev/og/posts/N9LHhrrqB.png og:image:alt: Multifunctional lists for Angular og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Multifunctional lists for Angular **[All Frontend](https://daily.dev/sources/allfrontend)** · [@djonnyx](https://daily.dev/djonnyx) · 2 min read · 8 upvotes · 0 comments ## Summary ng-virtual-list is an open-source Angular library (v X.12.X, supporting Angular 14-22) for high-performance virtualized list rendering. It supports fixed-size and dynamic-size items, custom scrolling mechanics, scroll snapping with alignment options, infinite looping, lazy loading, keyboard navigation, sticky layouts, multi-column/row grids, and visual effects like depth-of-field and motion blur. The library was originally built for messaging apps and has since been refined for general use cases like news feeds and e-commerce browsers. ## Content  About a year ago, I decided to create a universal open-source solution for list visualization. In the first versions, I tested the virtualization technology with various parameters, and there was a lot of research and questions. Today, version **X.12.X** was released, which runs on **Angular 14-22**. I’d like to talk about the capabilities of the tool ([ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list)), the problems it solves, and give a brief overview with examples. All examples below are contained in the code sample [documentation](https://ng-virtual-list.eugene-grebennikov.pro/). The [ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list) tool provides virtualized, high-performance lists with a variety of features that standard lists don’t have.  The [ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list) library focuses on rendering lists with fixed-sized items (the fastest rendering algorithm) and lists with dynamically sized items. The system has its own scrolling mechanism, so on a desktop computer you can scroll through lists using mouse or touchpad movements, just like on mobile devices.  The functionality includes scroll snapping to list items with various alignment options. Events such as **onSnap** are also available, which are ideal for notifying about element focus during scrolling.  Any list with different settings can be thought of as an infinite list that will iterate over collections of elements.  For each collection item, you can specify a set of metadata that will determine the behavior and sizes of the items on the screen.  The first versions of [ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list) were designed for messaging apps and had many bugs and omissions. Now, the functionality has been fully tested and refined, including the ability to pin the scrollbar to the bottom or top of a vertically oriented list, lazy loading of elements when reaching the beginning or end of the list, keyboard navigation, and much more.  Examples of processing large collections include a news feed or an online store content browser. Thanks to element virtualization, the performance of processing lists with large collections remains consistently high.  Lists can be divided into vertical columns or horizontal rows. Using metadata, list items can be resized to vary their width or height, or a **stickyLayout** can be applied to multiple items, creating a layout similar to the one shown above.  The [ng-virtual-list](https://github.com/DjonnyX/ng-virtual-list) component allows you to apply element transformations, add depth of field (**DOF**) effects, and add motion blur (**MotionBlur**). Above is a demonstration of navigating between elements using swipe gestures. ## Similar posts on daily.dev - [How to speed up long lists with TanStack Virtual](https://daily.dev/posts/how-to-speed-up-long-lists-with-tanstack-virtual-6gnyf4lae) · LogRocket · 1 upvotes · 0 comments --- Tags: [#performance](https://daily.dev/tags/performance), [#angular](https://daily.dev/tags/angular) [View this post on daily.dev](https://daily.dev/posts/multifunctional-lists-for-angular-n9lhhrrqb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/multifunctional-lists-for-angular-n9lhhrrqb","headline":"Multifunctional lists for Angular","text":"ng-virtual-list is an open-source Angular library (v X.12.X, supporting Angular 14-22) for high-performance virtualized list rendering. It supports fixed-size and dynamic-size items, custom scrolling mechanics, scroll snapping with alignment options, infinite looping, lazy loading, keyboard navigation, sticky layouts, multi-column/row grids, and visual effects like depth-of-field and motion blur. The library was originally built for messaging apps and has since been refined for general use cases like news feeds and e-commerce browsers.","url":"https://daily.dev/posts/multifunctional-lists-for-angular-n9lhhrrqb","datePublished":"2026-06-12T10:23:36.826Z","dateModified":"2026-06-12T10:23:55.117Z","author":{"@type":"Person","name":"Evgenii Grebennikov","url":"https://daily.dev/djonnyx","image":"https://media.daily.dev/image/upload/s--iM-m9HGE--/f_auto/v1781254371/avatars/avatar_22zIbt01D3XRiZ2S4XFmm?_a=BAMAMiWQ0","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":60}},"image":"https://media.daily.dev/image/upload/s--L3ScVdx1--/f_auto/v1781259130/posts/2E2qNo56q?_a=BAMAMiWQ0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/allfrontend","name":"All Frontend"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"All Frontend","item":"https://daily.dev/squads/allfrontend"},{"@type":"ListItem","position":3,"name":"Multifunctional lists for Angular"}]} ```