Dropdown List 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 client side. It can be configured via setting an array of data objects to options input property or by setting a RxJS Observable stream to dataSource input property.

In this data binding technique, data set will be fetched at once. Filtering and Option Selection operations are performed in client side via a built-in data source manager service.

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 current view 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-options-usage',
  templateUrl: './options-usage.component.html'
})
export class OptionsUsageComponent {
  public options: ExampleData[];

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

Basic Usage

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

  1. Bind via Options

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

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

    This approach can be used to bind a static options data collection. The complete set of code snippets for the data binding via options input property can be found in What You Will See section example. Dropdown list component reflect the data changes when options reference is updated hence, it is not sensitive to data source mutations.

  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 is reflected in dropdown list.

    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
Server Side Web Socket
Custom Data Provider
API Doc - Options Input