Client Side Basic Data Binding

Client side data binding allow the users to bind static data sets to the dropdown when the full data collection is available in the client side. It can be configured via setting an array of data objects to items input property or via setting a RxJS Observable stream to dataSource input property.

In this data binding technique, data set will be fetched at once. Filtering and Item Selection operations are performed in client side via an internal data source manager service.

If the data stream is very large and difficult to perform Filtering and Item Selection operations in the client side, Server Side Basic Data Binding can be use instead of using this technique.

However, it might affect the overall site performance if the data set is significantly larger. Consider using Server Side Basic Data Binding in such cases where all the computation heavy operations are handled in server side and only page level data is sent to client side for on demand data binding.

What You Will See

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Basic Usage

Client side data binding can be configured by using either of two approaches described below. Data emitted after initial data binding will re-initialize the dropdown with the new data set and drop previously bound data items collection or stream.

  1. Bind via Items

    items: any[]   Default Value: undefinedTarget Component: <ng-dropdown>

      <ng-dropdown
        ...
        [items]="items">
      </ng-dropdown>
    

    This approach can be used to bind a static data array. The complete set of code snippets for the data binding via items input property can be found in What You Will See section example. Mutations to the item collections will automatically get reflected in dropdown.

  2. Bind via Data Source

    dataSource: Observable<any[]>   Default Value: undefinedTarget Component: <ng-dropdown>

      <ng-dropdown
        ...
        [dataSource]="dataSource">
      </ng-dropdown>
    

    This approach can be used to bind an Observable data stream. Refer following example code snippet for complete usage of the dataSource property in the client side data binding. The last emitted data collection via the data source stream will get reflected in dropdown.

    Select
    import { Component } from '@angular/core';
    
    import { Observable, of } from 'rxjs';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-data-source-usage',
      templateUrl: './data-source-usage.component.html'
    })
    export class DataSourceUsageComponent {
      public dataSource: Observable<ExampleData[]>;
    
      constructor(private dataFetchService: DataFetchService) {
        this.dataSource = of(this.dataFetchService.fetchStaticData(0, 20));
      }
    }
    
Client Side Stream Binding
Server Side Basic Data Binding
API Doc for Client Side Basic Data Binding