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 { }