Angular RxJS examples: animated marbles using Web Components.

This post has 2 main goals.

• see RxJS in action with real code
• integrate an Angular element (Web Component) in a static page

The simulator in this page is build with Angular and uses 'real' RxJS operators to generate the animations.

This is an Angular element integrated in a static webpage generated with Spring and Mustache. I will write more in another post.

RxJS examples

There are always questions about RxJS. Ouch!

It's not very funny to study the official documentation, for this reason I implemented a simulator.

5 numbers and 5 letter are sent as Observables to the RxJS operator. The result is shown in the lower third.

If you click on 'Stop subscription' the marbles stop to move and you can explain what is happening. If you click on an operator name you restart the procedure.

I will add other operators in the future.

Issues

• please note that the color of the marbles and their timing are random, if there are white marbles these won't be visible.
• if 2 marbles appear at the same instant one will be hidden.