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).


  • 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
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.


  • 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.
const postArray = this.getPosts();

const comments = postArray.pipe(
mergeMap(posts => this.http.get(`${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 ( ) 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:

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:

Captain Out…

Publish a Hexo Blog to Github Pages

Earth Epoch: 1509639245 (2017-11-02)

_ This log explains how to publish a blog created with the static site generator Hexo to Github Pages. _

** Github pages **
Github pages is a service from Github that allows publishing a website directly from your github repository.

For example, you create a github project as<username>/<username> Then it is published as https://<username>

Github pages support natively the Jekyll static site generator. To make long story short, when you push changes of your Jekyll project to the github repository, Github automatically compiles Jekyll files into HTML pages and present them via

** Hexo generator **

Well, I found Jekyll not so trivial to install and configure, especially if you are not coming from a Ruby background.

I found Hexo much more easy to setup and start blogging. And as I come from javascript background, npm packages are easier for me.

But the problem is that Github pages do not know how to compile a Hexo project to a static HTML site. So if you upload your Hexo project to this special Github repository, Github Pages won’t be able to display the HTML.

Luckily, Github page can display any static HTML site, as long as it is installed in the root of the project repository.

Installing Hexo to Github Pages

So the trick is keep two separate repositories. One repository for your Hexo project, and another one for the static HTML site generated by your Hexo project.

The trick is to use the<username>/<username> as the placeholder of your Hexo compile results.


Have your two repositories relative close.

For example: .../my-blog/my-hexo-project/ for your Hexo project and .../my-blog/<username> for the generated HTML pages.

Now all you have to do is to edit your _config.yml file in your hexo-project, so it generates the produce static HTML site into your <username> project. Edit the public_dir entry accordingly.

For our previous example layout:

# Directory
source_dir: source
public_dir: ../
tag_dir: tags
archive_dir: archives

And that’s it. Now when you do hexo generate, it will spit out the generated files in the project project. Push changes to Github Pages project and you’re done.

Captain out…