Dropdown List Infinite Scroll

Infinite scroll functionality can boost performance, when working with large data sets. Dropdown will fetch the upcoming data on demand upon user scroll. Data limit and scroll sensitivity are configurable to accommodate custom application requirements. This functionality is supported by all data binding modes.

What You Will See

import { Component } from '@angular/core';

import { DropdownTranslations } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-infinite-scroll-usage',
  templateUrl: './infinite-scroll-usage.component.html'
})
export class InfiniteScrollUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData(0, 100);
  }
}

<ng-dropdown
  [id]="'products_options_02'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [options]="options"
  [loadOnScroll]="true">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { LazyLoadingUsageComponent } from './infinite-scroll-usage.component';

@NgModule({
 bootstrap: [LazyLoadingUsageComponent],
 declarations: [LazyLoadingUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class DropdownLazyLoadingUsageModule {
}

Basic Usage

loadOnScroll: boolean Default Value: falseTarget Component: <ng-dropdown>

Infinite scroll is disabled by default. It can be enable by setting the [loadOnScroll] input property true in <ng-dropdown> component. Pagination functionality depends on [limit] input property value described later in this section.

  <ng-dropdown
    ...
    [loadOnScroll]="true">
  </ng-dropdown>

Useful Properties

Below listed properties can be used to change the default behaviours of the Infinite scroll functionality. These property values are applicable only when Infinite scroll is enabled.

Limit

limit: number Default Value: 15Target Component: <ng-dropdown>

Limit input property can be used to declare number of dropdown list options to be fetched per scroll boundary hit until data source exhaust.

import { Component } from '@angular/core';

import { DropdownTranslations } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-infinite-scroll-limit-usage',
  templateUrl: './infinite-scroll-limit-usage.component.html'
})
export class InfiniteScrollLimitUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData(0, 100);
  }
}

<ng-dropdown
  [id]="'products_options_02'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [options]="options"
  [loadOnScroll]="true"
  [limit]="10">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { LazyLoadingLimitUsageComponent } from './infinite-scroll-limit-usage.component';

@NgModule({
 bootstrap: [LazyLoadingLimitUsageComponent],
 declarations: [LazyLoadingLimitUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class DropdownLazyLoadingLimitUsageModule {
}

Load View Distance Ratio

loadViewDistanceRatio: number Default Value: 1Target Component: <ng-dropdown>

Scroll sensitivity threshold to trigger data fetch action. This value is a ratio of dropdown option container height. i.e: 1 load view distance unit is equal to 1 dropdown options view height. It will trigger the data fetch action before hitting the edge when this value is higher.

import { Component } from '@angular/core';

import { DropdownTranslations } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-infinite-scroll-load-view-distance-usage',
  templateUrl: './infinite-scroll-load-view-distance-usage.component.html'
})
export class InfiniteScrollLoadViewDistanceUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData(0, 100);
  }
}

<ng-dropdown
  [id]="'products_options_02'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [options]="options"
  [loadOnScroll]="true"
  [limit]="10"
  [loadViewDistanceRatio]="2">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { LazyLoadingLoadViewDistanceUsageComponent } from './infinite-scroll-load-view-distance-usage.component';

@NgModule({
 bootstrap: [LazyLoadingLoadViewDistanceUsageComponent],
 declarations: [LazyLoadingLoadViewDistanceUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class DropdownLazyLoadingLimitUsageModule {
}