Angular 7 Virtual Scrolling

By importing ScrollingModule the newly added CDK can take advantage of the VirtualScrolling. When we have to define Virtual Scrolling, then it is loading or unloading of the DOM elements based on the noticeable aspects of the list. Now, Google has accelerated the speed of the huge scrollable lists.

Based on the visible parts of a list, virtual Scrolling loads and unloads elements from the DOM and make it possible to build very fast experiences for users with very large scrollable lists.

The <cdk-virtual-scroll-viewport> displays large lists of elements efficiently by only providing the items that fit on-screen. Loading hundreds of elements at a time can be slow in any browser. Virtual scrolling enables an effective way to simulate all items being provided by making the height of the container element the same as the height of the total number of elements to be rendered, and then only providing the items in view. Virtual scrolling is different from strategies like infinite scroll where it renders a set of elements and then renders the rest when you hit the end.

cdkScrollable and ScrollDispatcher

The cdkScrollable directive and the ScrollDispatcher service jointly permit components to react to scrolling in any of its ancestor scrolling containers.

The cdkScrollable directive must be applied to that element that acts as a scrolling container and this marks the element as a Scrollable and registers it with the ScrollDispatcher. The dispatcher then allows components to share both event listeners and knowledge of all the scrollable containers in the application.

ViewportRuler

The ViewportRuler is a service which will be injected and is used to measure the bounds of the browser viewport.

Basic virtual scroll

*ngFor is replaced by *cdkVirtualFor inside of a <cdk-virtual-scroll-viewport> , supporting the exact same API as *ngFor. The simplest usage just describes the list of items (note that the itemSize property on the viewport must be set).

EXAMPLE

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollingModule,
    BrowserAnimationsModule
  ],
  exports: [
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

*cdkVirtualFor makes the following context variables available to the template:

Context variable	Description
index	The index of the item in the data source.
count	The total number of items in the data source.
first	Whether this is the first item in the data source.
last	Whether this is the last item in the data source.
even	Whether the index is even.
odd	Whether the index is odd.

All of these apply to the index of the item available in the data source, not to the index of the rendered portion of data.

EXAMPLE

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DragDropModule,
    BrowserAnimationsModule
  ],
  exports: [      
    BrowserAnimationsModule  
  ],      
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The specification and working of a trackBy function are same as for the *ngFor trackBy. The index passed to the tracking function will be the index in the data source, not the index in the given portion.