Custom Data Provider

Ornamentum 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 table 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.

What You Will See

Select
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import { Observable } from 'rxjs';

import { DropdownQueryResult } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-custom-data-provider-usage',
  templateUrl: './custom-data-provider-usage.component.html'
})
export class CustomDataProviderUsageComponent {

  constructor(public http: HttpClient) {}

  /**
   * custom data provider need to return a function which is return an Observable out put
   * as long as your data return as observable you can use any data source
   * example : Firebase Realtime Database or Cloud Firestore
   */
  public onDataBind: () => Observable<DropdownQueryResult<ExampleData>> = (params?)
    : Observable<DropdownQueryResult<ExampleData>> => {
    let httpParams = new HttpParams();

    httpParams = httpParams
      .append('offset', params.offset)
      .append('limit', params.limit);

    return this.http.get('api/data', { params: httpParams }) as Observable<any>;
  };
}

Basic Usage

onDataBind: DropdownDataBindCallback<any>   Default Value: undefinedTarget Component: <ng-dropdown>

Ornamentum provided a way to integrated server side data bind functionality via onDataBind callback function input property. Data source associated logic is decoupled from Ornamentum core module to make it data source agnostic.

If you refer to Server Side Basic Data Binding and Server Side Web Socket Data Binding basic usage, getResourceProvider in DropdownHttpResourceFactoryService provides in build method take care of basic server data bind functionality. You can build your own data provider same as onDataBind internal data provider.

  1. Import DropdownResourceModule along with DropdownModule.

    import {HttpClientModule} from "@angular/common/http";
    
    import { DropdownModule, DropdownResourceModule } from 'ornamentum';
    
    @NgModule({
     ...
     imports: [
        ...
        HttpClientModule, // Import http client module which is required for server side basic data binding
        DropdownModule.forRoot(), // Import dropdown module
        DropdownResourceModule.forRoot() // Import dropdown resource module
      ]
    })
    
  2. The custom data provider needs to return a function which is supposed to be returned object as Observable.
    As long as your data return as observable you can use any data sources such as Firebase Realtime Database or Cloud Firestore.

    Select
    import { Component } from '@angular/core';
    import { HttpClient, HttpParams } from '@angular/common/http';
    
    import { Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    
    import { DropdownRequestParams, DropdownQueryResult } from 'ornamentum';
    
    @Component({
      selector: 'app-custom-data-provider-mapper-usage',
      templateUrl: './custom-data-provider-mapper-usage.component.html'
    })
    export class CustomDataProviderMapperUsageComponent {
    
      constructor(public http: HttpClient) {}
    
      /**
       * custom data provider need to return a function which is return an Observable out put
       * as long as your data return as observable you can use any data source
       * example : Firebase Realtime Database or Cloud Firestore
       */
      public onDataBind = (params: DropdownRequestParams): Observable<DropdownQueryResult<any>> => {
        const page = (params.offset + params.limit) / params.limit;
        const perPage = params.limit;
    
        let httpParams = new HttpParams();
        httpParams = httpParams
          .append('page', '' + page)
          .append('perPage', '' + perPage);
    
        return this.http.get('https://api.github.com/repos/yohangz/ornamentum/contributors', { params: httpParams })
          .pipe(
            map((res: any) => {
              /**
               * Items collection
               * items: T[];
               * Item count
               * count: number;
               */
              return {
                items: res,
                count: res.length
              };
            })
          ) as Observable<any>;
      }
    }
    
  3. Set the obtained data bind callback function reference to onDataBind input property of dropdown.

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

You can inspect network traffic of this page (Ornamentum Contributors) in browser developer tools to understand how backend service requests/response and behaviors for the above example.

Client Side Basic Data Binding
Server Side Web Socket Data Binding
API Doc for Server Side Basic Data Binding