Data Table Server Side Web Socket Data Binding

This data binding technique creates a live connection with the backend and notify when ever data is required. Unlike Server Side Basic Data Binding this approach allow you to push data from server to client. This can be used to bind dynamic data streams such as traffic, weather, analytics and etc which changes over time. This data binding approach internally use WebSockets to fetch data from server.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
import { Component, OnDestroy, OnInit } from '@angular/core';

import { Subscription } from 'rxjs';

import {
  DataTableWebsocketResourceFactoryService,
  DataTableDataBindCallback
} from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-web-socket-usage',
  templateUrl: './server-side-web-socket-usage.component.html'
})
export class ServerSideWebSocketUsageComponent implements OnInit, OnDestroy {
  public onDataBind: DataTableDataBindCallback<ExampleData>;
  
  private webSocketProvider: DataTableWebsocketDataFetchService<ExampleData>;
  
  constructor(private resourceFactory: DataTableWebsocketResourceFactoryService) {
    this.webSocketProvider = resourceFactory.getResourceProvider<ExampleData>();
  }

  /**
   * Component initialize lifecycle event handler.
   */
  public ngOnInit(): void {
    // Create web socket connection to support server side rendering.
    this.webSocketProvider.init({
      url: `wss://ornamentum.app` // web socket endpoint
    });

    this.onDataBind = this.webSocketProvider.onDataBind();
  }

  /**
   * Component destroy lifecycle event handler.
   */
  public ngOnDestroy(): void {
    this.webSocketProvider.dispose();
  }
}

Basic Usage

onDataBind: DataTableDataBindCallback<any>   Default Value: undefinedTarget Component: <ng-data-table>

Server side data bind functionality can be integrated via onDataBind callback function input property. Data source associated logic is decoupled from Ornamentum core module to make it data source agnostic.

  1. Import DataTableResourceModule along with DataTableModule.

    @NgModule({
     ...
     imports: [
        ...
        DataTableModule.forRoot(), // Import data table module
        DataTableResourceModule.forRoot() // Import data table resource module
      ]
    })
    
  2. Within the target component use DataTableWebsocketResourceFactoryService to construct an instance of DataTableWebSocketDataFetchService<T> class. Initialize the the newly created instance of DataTableWebSocketDataFetchService<T> by invoking init method and call onDataBind to get the data bind callback function reference within ngOnInit lifecycle event handler or component constructor depending on your preference. Cleanup resources and destroy the established Web Socket connection by invoking dispose method on DataTableWebSocketDataFetchService<T> instance within ngOnDestroy lifecycle event handler.

    @Component({
      ...
    })
    export class ServerSideWebSocketBasicUsageComponent {
      public onDataBind: DataTableDataBindCallback<ExampleData>;
      
      private webSocketProvider: DataTableWebsocketDataFetchService<ExampleData>;
      
      constructor(private resourceFactory: DataTableWebsocketResourceFactoryService) {
        this.webSocketProvider = resourceFactory.getResourceProvider<ExampleData>();
      }
    
      /**
       * Component initialize lifecycle event handler.
       */
      public ngOnInit(): void {
        // Create web socket connection to support server side rendering.
        this.webSocketProvider.init({
          url: `wss://ornamentum.app` // web socket endpoint
        });
    
        this.onDataBind = this.webSocketProvider.onDataBind();
      }
    
      /**
       * Component destroy lifecycle event handler.
       */
      public ngOnDestroy(): void {
        this.webSocketProvider.dispose();
      }
    }
    
  3. Set the callback function reference to onDataBind data table input property.

    <ng-data-table
      ...
      [onDataBind]="onDataBind">
    </ng-data-table>
    

WebSocket server (Your backend WebSocket API) should support following:

  • Service will receive data fetch request messages with DataTableRequestParams object containing request parameters upon pagination, filtering, sorting and any dynamic operation which require data re-fetch.
  • Service should respond follow DataTableQueryResult<T> schema. However, you can pass a custom response mapper callback function to onDataBind and map the response to DataTableQueryResult<T> schema without making changes in backend API response.

Custom Data Provider

Server side and client side data binding can be implemented via a custom data provider as Ornamentum data sources are fully decoupled from component logic. Please refer Custom Data Provider for more information.

Client Side Basic Data Binding
Client Side Stream Data Binding
Server Side Basic Data Binding
Custom Data Provider
API Doc for Server Side Web Socket Data Binding