Use Cases of RxJS with Angular

Here are two example use cases for RxJS streams with Angular. You can save the link as a reference.

This is intended to be the start of as series of use-case examples of RxJS with Angular. I will be gathering these and future use-cases in my Gist pages.

In this post:

  • Monitoring until: In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

  • Gather up info from APIs: In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Here follow code snippets and examples of RxJS and HttpClient in Angular

Monitoring until

In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

Explanation:

  • We use interval operator to create an observable that emits a dummy event (a counter) on specific intervals.
  • We use these dummy events to trigger calls to remove API, and merge the result back to the stream, with mergeMap.
  • Finally with takeWhile we check if the condition we want is met. If the conidition is met then
    • the particular event is not emitted
    • the transmition stops
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/Observable/interval';
import 'rxjs/add/operators/mergeMap';
import 'rxjs/add/operators/takeWhile';

...

const monitor = Observable.interval(2000) // parameter is milliseconds
.mergeMap (() => this.httpClient.get(remoteURL) ) // call remote API that returns Χ
.takeWhile ((X) => X === desiredValue /* condition that defines if the event will be emitted.

monitor.subscribe((X) => /* handle the events here */ );

...

Note: The above code works for Angular with RxJS 5.4 and older. With RxJS 5.5 .pipe can used to apply operators.

Gather up info from APIs

In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Explanation:

  • We create an observable that queries the 1st endpoint.
  • With mergeMap operator we trigger query for the 2nd endpoint. The 2nd query depends on the results of the 1st query.
  • Finally we combineLatest the two observables into one that emits the combination of the two.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
const postArray = this.getPosts();

const comments = postArray.pipe(
mergeMap(posts => this.http.get(`https://jsonplaceholder.typicode.com/posts/${posts[1].id}/comments`))
);

const latest = combineLatest (postArray, comments, (posts, cmnt) => {
return {a: posts, b: cmnt};
})

latest.subscribe(data => {
this.posts = data.a;
this.comment = data.b;
});

Note: We use RxJS 5.5 which now use the ‘lettable’ operators.

Captain out…

IoT Workshop / Voxxed Days Thessaloniki 2017

Sharing my notes and experience from Voxxed Days Thessaloniki 2017 - IoT Workshop

I was really excited and really glad that I particpated in this IoT Workshop with Jeremy Foster ( codefoster.com ) an expert in IoT development.

The workshop included an introduction to IoT and Azure IoT, and then hands-on project. The hands-on project started with setting up a Raspberry Pi 3 with a camera sensor and a bread-board with a button to trigger the camera.

Then the software would grab a picture from camera, send it to Azure IoT service that would analyze the picture and respond a description of the picture… It was real fun viewing the responses.

If you want to follow up this very interesting “getting started” workshop you can find all the instructions and code at Jeremy’s GitHub.

Getting started with Observables in Angular

So you want to get started with Observables? This is small guide on which resources to access first.

Get started with the following article to understand ReactiveX in general

The introduction to Reactive Programming you’ve been missing

Continue with the following article to see how you can use them in Angular.

RxJS for Angular Developers

The ReactiveX / RxJS website then can get you to more details:

reactivex.io/rxjs

And of course you are frequently need to refer to the available operators:

ReactiveX Operators

And the following project has full details with examples that can help you clear out things in your mind, while you are working.

Learn RxJS

Captain Out…

What is Ionic DevApp?

Started testing the new Ionic DevApp. This is a quick introduction on what is this great tool from Ionic team.

So, what is Ionic DevApp?

It is a tool from Ionic Team that will allow you to quickly and easily test your development code in multiple devices concurrently.

How does it work?

  1. You install the Ionic DevApp in your mobile devices
  2. You make sure that your development workstation and the Ionic DevApp devices are connected to the same wifi network.
  3. You launch an ionic serve command… that’s it.

The code will refresh and render in all your devices concurrently.

What about cordova plugins?

Ionic DevApp provides natively a great number of Cordova plugins (but not all). So unless you use something ‘rare’ you should be OK.

Check this list for details

Is it free?

Yes! Although it requires that your create an Ionic Pro account. But you can always create a Free Plan Ionic Pro account.

Try it now!

Find more details here: https://ionicframework.com/docs/pro/devapp/

Captain Out…