Client Side Basic Data Binding

Client side data binding allow users to bind static item set to dropdown when 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 and column Filtering and Item Selection operations are perform in client side. If the data stream is very large and struggle to perform Filtering and Item Selection operations in the client side, Server Side Basic Data Binding can be uses instead of using this technique.

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 dropdown with the new data set and drop previously bound data items collection or stream.

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

The complete set of code snippet for the data binding via items input property can be seen in the example shown in the What You Will See section above. Mutations of item collections will automatically get reflected in dropdown.

or

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

Refer following example code snippet for complete usage of the dataSource property in the client side data binding. Latest data collection emitted via 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