Forem: Evgenii Grebennikov

Writing a high-performance viewport for a messenger

Evgenii Grebennikov — Wed, 17 Sep 2025 04:38:40 +0000

The previous article was dedicated to the Angular tool ng-virtual-list. Since then, the tool has acquired rich functionality, a number of significant improvements have been made to the virtualization and tracking algorithms, stability and performance have been increased. A port to React has also been implemented.

It’s worth noting that ng-virtual-list is not just a virtualized list, it can optionally work as a virtualized select and multi-select; it can work with grouped lists, and in the future, collapsableGroups and multi-threading will be added.

Design

Now it’s time to test the full power of list virtualization in practice.

Let’s define the design conditions of the viewport:

Message list. Messages will be automatically created at the beginning and end of the list; implement the ability to edit and delete messages.
Search for a message by substring.
Side list of message providers, which will be displayed in the left dock. The dock opens by clicking on the corresponding button. When selecting a provider, the generated list of messages is displayed and the dock closes.
Viewport header, which will display the name of the message provider and the message search controls and the button to open the provider dock.

We will use Angular 19.x and ng-virtual-list@19

Implementation

In this article I will not provide the entire project code, because you can find it below at the link. I will concentrate only on the main points.

Detailed description of the template:

<div class="container">
    <!-- Toolbar -->
    <div class="toolbar">
      <div>
        <!-- Button that opens the dock with message providers -->
        <app-menu-button (click)="onOpenMenuHandler()" [opened]="menuOpened()" />
      </div>
      <!-- Message Provider Header -->
      <div class="title">{{title()}}</div>
      <!-- Control for searching messages by substring -->
      <app-search (search)="onSearchHandler($event)" />
    </div>

    <div class="list-container">
      @let dock = dockMode();
      <app-drawer [dock]="dock" [dockLeftSize]="240">
        <!-- Message Provider Dock -->
        <dock-left>
          <div class="list-rooms__container">
            <!-- Virtual list of message providers -->
            <ng-virtual-list class="list rooms" [items]="items" [itemRenderer]="itemRenderer" [trackBy]="'id'"
              [itemSize]="40" [dynamicSize]="true" [bufferSize]="60"
              (onItemClick)="onRoomClickHandler($event)"></ng-virtual-list>
          </div>
        </dock-left>
        <!-- Message viewport -->
        <div class="list-wrapper">
          <!-- Virtual Message List -->
          <ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer"
            [trackBy]="'id'" [itemSize]="40" [bufferSize]="30" [bufferSize]="120"
            [itemConfigMap]="groupDynamicItemsConfigMap" [dynamicSize]="true" [snap]="true"
            (onScroll)="onScrollHandler($event)" snappingMethod="advanced" methodForSelecting="multi-select"
            (onScrollEnd)="onScrollEndHandler($event)" [enabledBufferOptimization]="false"
            (onItemClick)="onClickHandler($event)"></ng-virtual-list>
        </div>
      </app-drawer>
    </div>
  </div>

<!-- Message template -->
  <ng-template #groupItemRenderer let-data="data" let-measures="measures" let-config="config">
    @if (data) {
      @switch (data.type) {
        <!-- Message generation indicator -->
        @case ("write-indicator") {
          <div class="list__windicator-container">
            <!-- Here is the icon for the message generation indicator -->
          </div>
        }
        <!-- Message group title -->
        @case ("group-header") {
          <div class="list__group-container" [ngClass]="{'snapped': config.snapped, 'snapped-out': config.snappedOut}">
            <span>{{data.name}}</span>
          </div>
        }
        <!-- Message -->
        @default {
          @let isIn = data.incomType === 'in';
          @let isOut = data.incomType === 'out';
          @let class = {'in': isIn, 'out': isOut, 'edited': data.edited, 'selected': config.selected, focused: config.focus};
          <div class="list__container" [ngClass]="class" [longPress]="1000">
            <div class="message__container" [ngClass]="class">
              <div class="message" [ngClass]="class">
                @if (data.edited) {
                  <!-- Editing a post with an image -->
                  @if (data.image) {
                    <div class="complex-message">
                      <img [src]="data.image" />
                      <textarea clickOutside [clickOutsideItem]="data" (keydown)="onKeyDownHandler($event)"
                    (onClickOutside)="onOutsideClickHandler($event, data, config.selected)"
                    [ngStyle]="{height: getContentHeight(measures.height, true) + 'px'}" [value]="data.name"
                    (click)="onTAClickHandler($event)" (onOutsideClose)="onEditingCloseHandler($event)"
                    (change)="onEditedHandler($event, data)"></textarea>
                    </div>
                  } @else {
                    <!-- Editing a post without an image -->
                    <textarea clickOutside [clickOutsideItem]="data" (keydown)="onKeyDownHandler($event)"
                    (onClickOutside)="onOutsideClickHandler($event, data, config.selected)"
                    [ngStyle]="{height: getContentHeight(measures.height) + 'px'}" [value]="data.name"
                    (click)="onTAClickHandler($event)" (onOutsideClose)="onEditingCloseHandler($event)"
                    (change)="onEditedHandler($event, data)"></textarea>
                  }
                } @else {
                  <!-- Message with image -->
                  @if (data.image) {
                    <div class="complex-message">
                      <img [src]="data.image" />
                      <span searchHighlight substringClass="search-substring" [text]="data.name" [searchedWords]="searchedWords()"
                        (click)="onEditItemHandler($event, data, config.selected)">{{data.name}}</span>
                    </div>
                  } @else {
                    <!-- Message without image -->
                    <span searchHighlight substringClass="search-substring" [text]="data.name" [searchedWords]="searchedWords()"
                      (click)="onEditItemHandler($event, data, config.selected)">{{data.name}}</span>
                  }
                }
              </div>
                <!-- When you select a message, a control for deleting it appears. -->
                @if (config.selected) {
                  <div class="flex"></div>
                  <div class="message__controls">
                    <div class="ctrl__button del-icon" (click)="onDeleteItemHandler($event, data)">
                      <!-- Icon for the delete button -->
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        }
      }
  </ng-template>

  <!-- Message Provider List Item Template -->
  <ng-template #itemRenderer let-data="data" let-config="config">
    @if (data) {
      @switch (data.type) {
        @case ("group-header") {
          <div class="list__item-container">
            <div class="content">
              <span>{{data.name}}</span>
            </div>
          </div>
        }
        @default {
          <div class="list__item-container">
            <div class="message">
              <span>
                <!-- Here is the icon for the supplier -->
              </span>
              <span>{{data.name}}</span>
            </div>
          </div>
        }
      }
    }
  </ng-template>
</div>

Detailed description of the App component:

constructor(private _service: ClickOutsideService) {
    const list = this._listContainerRef;

    this.dockMode = computed(() => {
      const menuOpened = this.menuOpened();
      return menuOpened ? DockMode.LEFT : DockMode.NONE;
    });

    const $virtualList = toObservable(list).pipe(
      filter(list => !!list),
      switchMap(list => combineLatest([of(list), list?.$initialized])),
      filter(([, init]) => !!init),
      map(([list]) => list),
    );

    // At the moment of initialization and updating of the list of messages
    // checks, if it is necessary to scroll to the end of the list, then it performs scrolling
    combineLatest([this.$version, $virtualList]).pipe(
      map(([version, list]) => ({ version, list })),
      filter(({ list }) => !!list),
      debounceTime(50),
      tap(({ version, list }) => {
        if (version === 0) {
          list!.scrollToEnd('instant');
        }

        if (this._$isEndOfListPosition.getValue()) {
          list!.scrollToEnd('instant');
        }
      }),
    ).subscribe();

    // Search and scroll to the desired message in the viewport
    combineLatest([$virtualList, toObservable(this.search)]).pipe(
      map(([list, search]) => ({ list, search })),
      filter(({ list }) => !!list),
      debounceTime(0),
      tap(({ list, search }) => {
        this.searchedWords.set(search.split(' '));
        for (let i = 0, l = this.groupDynamicItems.length; i < l; i++) {
          const item = this.groupDynamicItems[i], name: string = item['name'];
          if (name) {
            const index = name?.indexOf(search);
            if (index > -1) {
              list!.scrollTo(item.id, 'instant');
              break;
            }
          }
        }
      }),
    ).subscribe();

    // During initialization, the first message is generated
    $virtualList.pipe(
      delay(100),
      mergeMap(() => this.write()),
    ).subscribe();

    // Further generation of new messages is performed at intervals of 2 seconds.
    from(interval(2000)).pipe(
      mergeMap(() => this.write()),
    ).subscribe();

    // Calculating if a scroll position is final
    combineLatest([toObservable(this._scrollParams), $virtualList, this.$version]).pipe(
      delay(10),
      switchMap(([{ viewportEndY, scrollWeight }, list]) => {
        let bounds: ISize | undefined;
        if (list) {
          bounds = list.getItemBounds(this.groupDynamicItems[this.groupDynamicItems.length - 1].id);
        }
        const height = (bounds?.height ?? 0);
        return of((viewportEndY + height + SNAP_HEIGHT) >= scrollWeight);
      }),
      tap(v => {
        this._$isEndOfListPosition.next(v);
      }),
    ).subscribe();

    const appHeightHandler = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
    window.addEventListener('resize', appHeightHandler);

    $virtualList.pipe(
      tap(() => {
        appHeightHandler();
      }),
      delay(100),
      tap(() => {
        document.documentElement.style.setProperty('--viewport-alpha', '1');
      }),
    ).subscribe();
  }

  /**
   * Calculates the height for an editable text field.
   */
  getContentHeight(v: number, hasImage: boolean = false) {
    return Math.ceil(v) - 34 - (hasImage ? 72 : 0);
  }

  /**
   * Substring search handler
   */
  onSearchHandler(pattern: string) {
    this.search.set(pattern);
  }

  /**
   * Reset list to initial state
   * Called after selecting a message provider
   */
  private resetList() {
    this.groupDynamicItems = [...GROUP_DYNAMIC_ITEMS];
    this.groupDynamicItemsConfigMap = { ...GROUP_DYNAMIC_ITEMS_STICKY_MAP };
  }

  /** Message generation flow */
  private write() {
    const msg = generateMessage(this._nextIndex);
    this._nextIndex++;
    return of(msg).pipe(
      tap(() => {
        const writeIndicator = generateWriteIndicator(this._nextIndex);
        this._nextIndex++;
        this.groupDynamicItems = [...this.groupDynamicItems, writeIndicator];
        this.groupDynamicItemsConfigMap[writeIndicator.id] = {
          sticky: 0,
          selectable: false,
        };

        const writeIndicatorShift = generateWriteIndicator(this._nextIndex);
        this._nextIndex++;
        this.groupDynamicItems = [writeIndicatorShift, ...this.groupDynamicItems];
        this.groupDynamicItemsConfigMap[writeIndicatorShift.id] = {
          sticky: 0,
          selectable: false,
        };

        this.increaseVersion();
      }),
      delay(500),
      tap(() => {
        const items = [...this.groupDynamicItems];
        items.pop();
        items.push(msg);
        this.groupDynamicItemsConfigMap[msg.id] = {
          sticky: 0,
          selectable: true,
        };

        items.shift();

        for (let i = 0, l = 1; i < l; i++) {
          const msgStart = generateMessage(this._nextIndex);
          this._nextIndex++;
          this.groupDynamicItemsConfigMap[msgStart.id] = {
            sticky: 0,
            selectable: true,
          };
          items.unshift(msgStart);
        }

        this.groupDynamicItems = items;

        this.increaseVersion();
      }),
    );
  }

  /**
   * Records scroll metrics
   */
  onScrollHandler(e: IScrollEvent & { [x: string]: any; }) {
    this._scrollParams.set({
      viewportEndY: e.scrollSize + e.size,
      scrollWeight: e.scrollWeight,
    });
  }

  /**
   * Records scroll metrics
   */
  onScrollEndHandler(e: IScrollEvent & { [x: string]: any; }) {
    this._scrollParams.set({
      viewportEndY: e.scrollSize + e.size,
      scrollWeight: e.scrollWeight,
    });
  }

  /**
   * Trace a click on a message
   */
  onClickHandler(item: IRenderVirtualListItem | undefined) {
    if (item) {
      console.info(`Click: (ID: ${item.id}) Item ${item.data.name}`);
    }
  }

  /**
   * Block propagation of `keydown` event when pressing `Space`
   * This is necessary to prevent deselection of a message.
   * Because the `Space` key is responsible for selecting a message in the list
   */
  onKeyDownHandler(e: KeyboardEvent) {
    if (e.key === ' ') {
      e.stopImmediatePropagation();
    }
  }

  /**
   * Edit mode switch handler
   */
  onEditItemHandler(e: Event, item: IRenderVirtualListItem | undefined, selected: boolean) {
    if (selected) {
      e.stopImmediatePropagation();
    }
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], item = items[index];
      items[index] = { ...item, edited: selected ? !item.edited : false };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  onTAClickHandler(e: Event) {
    e.stopImmediatePropagation();
  }

  /**
   * Finish editing a message when `outside click` is triggered
   */
  onOutsideClickHandler(e: Event, item: IRenderVirtualListItem<any> | undefined, selected: boolean) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], item = items[index];
      items[index] = { ...item, edited: false };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
    this._service.activeTarget = null;
  }

  /**
   * Message editing completion handler
   */
  onEditingCloseHandler(data: { target: any; item: IItemData & { id: Id }; }) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === data.item.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], _item = items[index];
      items[index] = { ..._item, edited: false, name: data.target.value };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Handler for transitioning a message from viewing to editing mode and vice versa
   */
  onEditedHandler(e: any, item: IRenderVirtualListItem<any> | undefined) {
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems], _item = items[index];
      items[index] = { ..._item, edited: !_item.edited, name: e.target.value };
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Message deletion handler
   */
  onDeleteItemHandler(e: Event, item: IRenderVirtualListItem | undefined) {
    e.stopImmediatePropagation();
    const index = this.groupDynamicItems.findIndex(({ id }) => id === item?.id);
    if (index > -1) {
      const items = [...this.groupDynamicItems];
      items.splice(index, 1);
      this.groupDynamicItems = items;
      this.increaseVersion();
    }
  }

  /**
   * Message Provider Click Handler
   */
  onRoomClickHandler(item: IRenderVirtualListItem | undefined) {
    this.menuOpened.set(false);
    if (item) {
      this.title.set(item.data['name']);
      this.resetList();
      this._listContainerRef()?.scrollToEnd('instant');

      setTimeout(() => {
        this._listContainerRef()?.scrollToEnd('instant');
      }, 150);
    }
  }

  /**
   * Opening/closing the dock with message providers
   */
  onOpenMenuHandler() {
    this.menuOpened.update(v => !v);
  }

The full project code can be found at ng-virtual-list-demo.

Live demo of the project.

Liked the project and the tool? Give ng-virtual-list a star ⭐ and the tool will develop and improve!

Also, if you are interested in this list of virtualization tools for React, also star ⭐ rcx-virtual-list and the project will be ported with full functionality of the original!

Extremely large lists or maximum list performance in Angular

Evgenii Grebennikov — Thu, 26 Jun 2025 12:25:11 +0000

Of course, we will talk about lists with virtualization.

A bit of theory

In the classic implementation, lists include all elements from the collection. In other words, those elements that are not visible to the user (are outside the viewport) are still present in the DOM tree. Now imagine if the list consists of, say, 1,000,000 elements, how will this affect performance and resource consumption? The answer is obvious: resource consumption will increase proportionally to the collection size and overall performance will decrease.

But fortunately for us, there are methods and algorithms that allow us to significantly speed up work with such huge lists.

Image demonstrating the concept of virtualized lists.

The concept of list virtualization is very simple. The number of elements that fit within the viewport boundaries plus the buffer zone is calculated, the corresponding number of list element components is created, and then all manipulations will occur with the already created components. When a scroll event is received, methods for recalculating the elements included in the visualization list are called. The component that goes beyond the buffer area will be used again at the moment of list shifting. It will be assigned new coordinates and new data from the corresponding collection element will be transferred.

The process of assigning new coordinates and data of a collection element to a “free” component is called tracking. Tracking of list elements must be performed by a unique identifier, since a mapping of the collection element’s correspondence by a given identifier and a component of the screen area is created.

Demonstration of component behavior in the DOM tree.

As you can see from the image above, the DOM tree does not have more elements than the calculated and specified buffer limit (i.e. the number of components is +- constant).

If we talk about virtualized lists with fixed element size, then this is a very simple problem with linear calculations.

Virtualized lists with content-adapted elements are not such a simple task. To calculate positions correctly, it is necessary to introduce the concept of a cache of “marked” and “unmarked” areas, then calculate metrics and correctly visualize components using a recursive “chain” update. But that’s not all. When scrolling, “problems” with positions will arise, to solve them, it will be necessary to introduce a delta offset, which is calculated based on the difference between the “marked” and “unmarked” areas.

For those of you who want to practice writing a solution like this, this is a great challenge!

And then we will talk about the tool ready for use.

NgVirtualList

Link to npm package: ng-virtual-list

Next we will consider an example of creating a virtualized list with incoming and outgoing messages, grouped by, for example, date. The size of the collection will be 100,000 messages.

We will need Angular version from 14.x to 20.x. At the time of writing, the latest release version of the package is 20.0.12, which corresponds to Angular version 20.x.

Installing angular cli:

npm i -g @angular/cli@20

Creating a new Angular project:

ng new [Your project name]

Go to the directory of the created project:

cd [Your project name]

Installing the ng-virtual-list tool:

npm i ng-virtual-list@20

In src/app/app.component.ts we write the following code:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NgVirtualListComponent, IVirtualListCollection, IVirtualListStickyMap } from 'ng-virtual-list';

///////////// Generate a collection of messages with arbitrary text /////////////
const MAX_ITEMS = 100000;

const CHARS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

const generateLetter = () => {
  return CHARS[Math.round(Math.random() * CHARS.length)];
}

const generateWord = () => {
  const length = 5 + Math.floor(Math.random() * 50), result = [];
  while (result.length < length) {
    result.push(generateLetter());
  }
  return `${result.join('')}`;
};

const generateText = () => {
  const length = 2 + Math.floor(Math.random() * 10), result = [];
  while (result.length < length) {
    result.push(generateWord());
  }
  let firstWord = '';
  for (let i = 0, l = result[0].length; i < l; i++) {
    const letter = result[0].charAt(i);
    firstWord += i === 0 ? letter.toUpperCase() : letter;
  }
  result[0] = firstWord;
  return `${result.join(' ')}.`;
};

const GROUP_DYNAMIC_ITEMS: IVirtualListCollection = [],
  GROUP_DYNAMIC_ITEMS_STICKY_MAP: IVirtualListStickyMap = {};

let groupDynamicIndex = 0;
for (let i = 0, l = MAX_ITEMS; i < l; i++) {
  const id = i + 1, type = i === 0 || Math.random() > .895 ? 'group-header' : 'item', incomType = Math.random() > .5 ? 'in' : 'out';
  if (type === 'group-header') {
    groupDynamicIndex++;
  }
  GROUP_DYNAMIC_ITEMS.push({ id, type, name: type === 'group-header' ? `Group ${groupDynamicIndex}` : `${id}. ${generateText()}`, incomType });
  GROUP_DYNAMIC_ITEMS_STICKY_MAP[id] = type === 'group-header' ? 1 : 0;
}
////////////////////////////////////////////////////////////////////////////////

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, NgVirtualListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  groupDynamicItems = GROUP_DYNAMIC_ITEMS;
  groupDynamicItemsStickyMap = GROUP_DYNAMIC_ITEMS_STICKY_MAP;
}

Setting up the template src/app/App.component.html:

<div class="wrapper">
  <div class="vl-section block cap">
    <h1 class="center">ng-virtual-list demo</h1>
  </div>

  <div class="container">
    <ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer"
      [itemsOffset]="10" [stickyMap]="groupDynamicItemsStickyMap" [dynamicSize]="true" [snap]="true"></ng-virtual-list>
  </div>

  <ng-template #groupItemRenderer let-data="data" let-config="config">
    @if (data) {
      @switch (data.type) {
        @case ("group-header") {
          <div class="list__group-container" [ngClass]="{'snapped': config.snapped, 'snapped-out': config.snappedOut}">
            <span>{{data.name}}</span>
          </div>
        }
        @default {
            @let isIn = data.incomType === 'in';
            @let isOut = data.incomType === 'out';
            @let class = {'in': isIn, 'out': isOut};
            <div class="list__container" [ngClass]="class" [ngStyle]="{}">
              <div class="message" [ngClass]="class">
                <span>{{data.name}}</span>
              </div>
            </div>
          }
        }
    }
  </ng-template>
</div>

Edit src/app/app.component.scss:

// reset ng-virtual-list-item styles
.list::part(item) {
    background-color: unset;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vl-section {
    padding: 0 20px;
    margin-bottom: 24px;
    width: calc(100% - 40px);
    max-width: 640px;

    &.cap {
        margin-bottom: 24px;
    }

    &>h1 {
        background: -webkit-linear-gradient(0deg, #6f00e2 0%0%, #6f00e2 30%, #f90058 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 19px;
        font-weight: 800;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        letter-spacing: 0.5px;
        margin-bottom: 9px;

        &.center {
            width: 100%;
            text-align: center;
        }
    }

    &.block {
        padding: 20px 20px 4px;
    }
}

.container {
    display: grid;
    height: calc(100%);
    width: auto;
    min-width: 480px;
    overflow: hidden;
}

.list {
    background: linear-gradient(180deg, rgb(80, 42, 155) 0%, rgb(53, 147, 184) 100%);
    border-radius: 4px;

    &::part(scroller) {
        scroll-behavior: auto;
    }

    &__container {
        height: 100%;
        width: 100%;
        padding: 6px 20px;
        background-color: transparent;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        &>* {
            height: auto;
        }

        &.in {
            justify-content: start;
        }

        &.out {
            justify-content: end;
        }

        .message {
            display: flex;
            max-width: 55%;
            background-color: rgb(210, 220, 221);
            border-radius: 12px;
            box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 10px 14px;
            word-break: break-all;

            &.in {
                border-bottom-left-radius: 0px;
            }

            &.out {
                border-bottom-right-radius: 0px;
            }
        }
    }

    &__group-container {

        &.snapped,
        &.snapped-out {
            background-color: rgb(80, 45, 156);
        }

        height: 100%;
        width: 100%;
        padding: 6px 12px;
        background-color: transparent;
        color: rgb(241 246 255);
        box-sizing: border-box;
        font-weight: 800;
        font-size: 12px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;

        &>* {
            height: auto;
        }
    }

    &.vertical {
        max-height: unset;
        height: 100%;
        width: 100%;
    }
}

Edit src/style.scs:

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #0f0f11;
    padding: 0 40px 40px;
    margin: 0;
    width: calc(100% - 80px);
    height: calc(100vh - 80px);
}

Let’s launch the project:

ng serve

Go to localhost:4200 in the browser

Conclusion

We implemented an “extremely” optimized grouped virtual list with dynamically sized content elements in minutes.

GIT repository of the project ng-virtual-list