Dropdown List Client Side Stream Data Binding

This data binding technique can be used to bind data stream to represent dynamic data such as traffic, weather, analytics and etc which changes over time. Ornamentum is capable of handling live data sources with all available features such as Filtering, Option Selection etc.

Client side stream data binding technique can be used to bind data sources which changes rapidly. Data changes notified by data source will automatically get reflected while persisting the current dropdown state.

What You Will See

Basic Usage

Client side stream data binding can be configured by using either of the approaches described below. Note that it will always re-render dropdown with last emitted data set.

  1. Bind via Data Source

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

    Setting an RxJS Observable stream to dataSource input property with the same approach discussed in the Client Side Basic Data Binding section. The data table reflect the changes accordingly when data source stream emits latest data set to be bound.

    The complete set of code snippet for the client side stream data binding via dataSource input property can be seen in the example shown in What You Will See section example.

  2. Bind via options

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

    The options input property also can be used to implement the same behaviour instead of using an RxJS Observable stream to bind real time data.

    Let's modify the controller code snippet in above example (client-side-stream-usage.component.ts) to emulate the real time data binding behavior by using options property instead of dataSource.

    Dropdown list options input property setter will capture and re-render dropdown list view when ever new data collection reference is set to items. We highly recommend the usage of dataSource over items binding. However, you can proceed with this approach if you prefer using data arrays over streams.

Client Side Basic Data Binding
Server Side Basic Data Binding
Server Side Web Socket Data Binding
Custom Data Provider
API Doc - Data Source Input