Server Side Basic Data Binding

Server side data binding allow users to bind large data sets that are not directly accessible as a full collection in client side due to various reasons. Server side data binding can improve performance drastically for large data sets but integration is fairly complex compared to Client Side Basic Data Binding and Client Side Stream Data Binding techniques.

Unlike in Client Side Basic Data Binding, server side rendering will request for data on dropdown initialization and whenever user performs Server Side Filtering operation. Ornamentum has provided an optional opinionated service to integrate external data sources. Also, you can build a custom data provider depending on your requirement.

What You Will See

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

import { DropdownDataBindCallback, DropdownHttpResourceService } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-basic-usage',
  templateUrl: './server-side-basic-usage.component.html'
})
export class ServerSideBasicUsageComponent {
  public onDataBind: DropdownDataBindCallback;

  constructor(private dataFetchService: DropdownHttpResourceService<ExampleData>) {
    this.onDataBind = this.dataFetchService.onDataBind('/api/data');
  }
}

Basic Usage

Server side data binding is handled via onDataBind callback function. Use this callback reference to hook into data bind workflow and provide custom data source. This callback function will get triggered on dropdown initialization and on dynamic dropdown operations. It receives DropdownRequestParams argument and expect to return RxJS Observable query result DropdownQueryResult<T> object stream. Data returned from this callback function will be directly bound to dropdown assuming that it matches the on demand request context.

For use of Server side basic data binding operations it is mandatory to import DropdownResourceModule to your application module.

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

Following code snippet represent an example implementation of onDataBind callback.

  public onDataBind(
    resourcePath: string,
    mapper?: <Q>(response: Observable<Q>) => Observable<DropdownQueryResult<T[]>>,
    requestOptions?: any
  ): DropdownDataBindCallback {
    return (params?: DropdownRequestParams): Observable<DropdownQueryResult<T[]>> => {
      let queryParams = new HttpParams();

      if (params) {
        if (params.limit !== undefined) {
          queryParams = queryParams.set('limit', String(params.limit));
        }

        if (params.offset !== undefined) {
          queryParams = queryParams.set('offset', String(params.offset));
        }

        if (params.filter && params.filter.value) {
          queryParams = queryParams.set('filter', `${params.filter.key}|${params.filter.value}`);
        }

        const resource = this.http.get<any>(resourcePath, { params: queryParams, ...requestOptions }) as Observable<any>;

        if (mapper) {
          return mapper(resource);
        }

        return resource;
      }
    };
  }
API Doc for Server Side Basic Data Binding