Angular Grid Live Data Updates

    The Grid component is able to handle thousands of updates per second, while staying responsive for user interactions.

    Angular Live-data Update Example

    The sample below demonstrates the Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the Line Chart to experience the powerful charting capabilities of Ignite UI for Angular. The Chart button will show Category Prices per Region data for the selected rows and the Chart column button will show the same for the current row.

    Data binding and updates

    A service provides data to the component when the page loads, and when the slider controller is used to fetch a certain number of records. While in a real scenario updated data would be consumed from the service, here data is updated in code. This is done to keep the demo simple and focus on its main goal - demonstrate the grid performance.

    <igx-grid #grid [data]="data"></igx-grid>

    public ngOnInit() {
    this.localService.getData(this.volume);
    this.volumeSlider.onValueChange.subscribe(x => this.localService.getData(this.volume);
    this.localService.records.subscribe(x => { this.data = x; });
}

    Angular pipes are used internally to update the grid view. A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to complex data objects, because the Angular pure pipe will not detect a change in a nested property. To resolve the situation, provide a new object reference for the data object containing the property. Example:

    <igx-grid #grid [data]="data">
    <igx-column field="price.usd"></igx-column>
</igx-grid>

    private updateData(data: IRecord[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.data = newData;
}

    Templates

    Updating the view works the same way for columns with a default template and for columns with a custom template. However, it is recommended to keep custom templates relatively simple. As number of elements in the template grows, negative performance impact rises as well.

    Live-data feed with Dock Manager and igxGrid Components

    The purpose of this demo is to showcase a financial screen board with Real-time data stream using a SignalR hub back-end. As you can see the igxGrid component handles with ease the high-frequency updates from the server. The code for the ASP.NET Core application using SignalR could be found in this public GitHub repository.

    Start the hub connection

    The signal-r.service handles the connectivity and updates of the exposed manageable parameters frequency, volume and live-update state toggle (Start/Stop).

    this.hubConnection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Trace)
        .withUrl('https://www.infragistics.com/angular-apis/webapi/streamHub')
        .build();
    this.hubConnection
        .start()
        .then(() => {
            this.hasRemoteConnection = true;
            this.registerSignalEvents();
            this.broadcastParams(interval, volume, live, updateAll);
        })
        .catch(() => {});

    Based on the specified frequency a total of 30 new updates will be received by the Grids from the server. A specific cellStyle classes are applied to the three columns that are handling the changes (Price, Change and Change in percent).

    Update frequency and data volume

    By using the Action panel on the left, you can manage the frequency of the data feed and the volume of the requested data. All grids use the same data source. Feel free to use the other action elements to stop the data feed, change the application theme or add dynamically a DockSlot container with a igxGrid.

    We use the 'updateparameters' method to request a new set of data with certain frequency. This method is part of the SignalR stream hub implementation.

    this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll)
    .then(() => console.log('requestLiveData', volume))
    .catch(err => {
        console.error(err);
    });

    Dynamically create DockSlot and Grid components

    By using the ComponentFactoryResolver we are able to create DockSlot and Grid components on the fly.

    DockManager component

    Take leverage of the Dock Manager WebComponent and build your own webview by using the docket or floating panels. In order to add a new floating panel, go ahead and open the Action pane on the right and click the 'Add floating pane' button. Drag and drop the new pane at the desired location.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.