RxJS Stream Monitor
Simple utility to monitor the status of an observable
Requirements
rxjs 5+
Install.
npm install rxjs-stream-monitor --save
How to use.
Propably you are familiar with this pattern in Angular if you are querying for some data
public class SomeComponent {
// ...
public loadSomeData() {
this.isDataLoading = true;
this.dataQueryError = null;
this.data = null;
this.httpDataService.querySomeData()
.subscribe(response => {
this.data = response;
this.isDataLoading = false;
},
error => {
this.dataQueryError = error;
this.isDataLoading = false;
});
}
}With this library, you can simplify the status monitoring like this:
import { createMonitor, monitor } from "rxjs-stream-monitor";
public class SomeComponent {
// ...
public queryMonitor = createMonitor();
public loadSomeData() {
this.httpDataService.querySomeData()
.pipe(monitor(this.queryMonitor))
.subscribe(response => {
this.data = response;
})
}
}Example of status binding in Angular.
In the Angular template, you can bind the status to loading indicators like this:
<div class="loading" *ngIf="queryMonitor.isActive"></div>
<div class="error" *ngIf="queryMonitor.isEr">Error: {{queryMonitor.error}}</div>Even you can get the number of messages received if you are piping it to an infinit observable / observable with multiple values:
<div class="message-count">Messages Received: {{queryMonitor.pumps}}</div>You can also use this library for handling status of Promises.
This is useful when you are mixing Promises and Observables.
import { createMonitor, monitorPromise } from "rxjs-stream-monitor";
public class SomeComponent {
// ...
public queryMonitor = createMonitor();
public async loadSomeData() {
const query: Promise<any> = this.httpDataService.querySomeDataUsingPromiseApi();
const result = await monitorPromise(this.queryMonitor, query);
}
}
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)