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
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.
Bind via Data Source
dataSource: Observable<any>Default Value: undefinedTarget Component: <ng-dropdown>
Setting an RxJS Observable stream to
dataSourceinput 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
dataSourceinput property can be seen in the example shown in What You Will See section example.
Bind via options
options: anyDefault Value: undefinedTarget Component: <ng-dropdown>
optionsinput 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
optionsproperty instead of
optionsinput 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
itemsbinding. However, you can proceed with this approach if you prefer using data arrays over streams.
Suggested LinksClient Side Basic Data Binding
Server Side Basic Data Binding
Server Side Web Socket Data Binding
Custom Data Provider
API Doc - Data Source Input