Live Angular DataTable? Look no further, RxJS💕 is the answer😍

Photo by Aron Visuals on Unsplash

Have you ever wondered how to handle live updates in your Angular application ? Are you using WebSockets to push periodically a new stream of data to your client? Then, you’ve come to the right place !

Prerequisites

Basic knowledge of Angular & RxJs is required.

Introduction

If you have a WebSocket server that pushes the newest version of the data and you want to consume these updates at real time. Look no further, RxJS is the answer ! I will tell you in the following sections how you achieve this step by step.

You’ve just said RxJS ?

Yes ! what you’ll be really glad to know, is that RxJs ships with the WebSocketSubject which is a wrapper around the w3c-compatible webSocket object available in the browser allowing to both send and receive data via WS connection. WebSocketSubject is a special type of RxJS Subjects. In short, Subjects are observers and observable at the same time.

Okay, but how to use it ?

In order to use it, all that you have to do is calling the webSocket factory function that produces this special type of subject and takes as a parameter the endpoint of your ws server

import { webSocket } from 'rxjs/webSocket';
const subject = webSocket('ws://localhost:8081');

This way you have a ready to use subject that you should subscribe to in order to establish the connection with your endpoint and start receiving and sending some data.

Simple, right ?

Now let’s see the main implementation steps.

Step 1: Isolate the webSocket connection management in a separate service as follows:

WebSocket Data Service

connect(): creates a WebSocketSubject if no one is created. The URL of the ws endpoint is externalized in the environment file.

disconnect(): closes the connection.

dataUpdates$(): returns an observable that we will subscribe to.

connect() and disconnect() are private methods that can be used only within the service for security purposes.

Step2: Inject this service in your live Angular component

In this example my live component is holding a PrimeNG data table. For the sake of this tutorial, I’m using fake financial transactions.

constructor(private dataService: DataService) {}

Step 3: Declare an Observable👀that will hold the stream of data over time.

You can register callbacks to process the incoming messages from the server and get notified when an error happens or when the connection is closed, as implemented in the code above. By default, incoming messages are deserialized using JSON.parse(), however we can apply a custom deserialization strategy using WebSocketSubjectConfig.

Step4: Subscribe to that observable in the component’s template.

[value]=”transactions$ | async”

The pipe async will manage for us the subscription and unsubscription to the observable.

Step5 : Implement the ngOnDestroy to release the subscription

ngOnDestroy() {
this.service.disconnect();
}

Step6: Ice on the cake 🍰 a good change detection strategy 😉

Use the OnPush change detection strategy to gain in performance

Conclusion

In just a few steps, we’ve created a live Angular table using RxJS WebSocketSubject: soon we can go deep in catching errors, reconnection policies and state management but this will come in another story. 🎉