ReactiveX operators – Angular playground

Reactive programming pattern seems to get more and more trusted by developers for building large-scale Web applications. Applications built with this pattern make use of frameworks, libraries or architecture styles that eventually will force you to intensively use RxJS and its operators. It’s kind of difficult to start using ngrx/store if you haven’t already being familiar with RxJS operators. This is why I thought it would be nice to create a playground project where we could gather as many RxJS operators examples as possible, using Angular. This will help you to visually understand the exact behavior of an RxJS operator.

The Playground

The previous gif image is actually the home screen of the project, making use of RxJS operators in order to flip individual div elements.

let counter = 0;
const interval$ = Observable.interval(100).take(13 * 5).map(i => i % 13);
const indexSubject: Subject<number> = new BehaviorSubject(counter);

  .subscribe(([i, j]) => {
    this.phrases[j][i].highlighted = true;
     if (i === 12) {

The project is built with Angular 4, Angular Material 2 and has currently examples for the most commonly used RxJS operators, such as merge, scan, reduce or combineLatest. I will be adding more in the future and you are welcomed to contribute as well. You will find that each example has 3 tabs, one to show what an operator can do, another that has an iframe with the operator’s documentation and a third one to show the most important code lines used for the example.

Make sure you clone or fork the repository and get the latest changes being committed every time.

In case you find my blog’s content interesting, register your email to receive notifications of new posts and follow chsakell’s Blog on its Facebook or Twitter accounts.

Facebook Twitter
.NET Web Application Development by Chris S.
facebook twitter-small

Categories: Angular


2 replies

  1. The app rocks! Waiting for more examples, thanks sir

  2. Super blog. Very helpful. Thank you!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


about the city and the people

Enabling product teams to achieve their full potential

Diary Of A Programmer

Because every day is worth noting

chsakell's Blog



A Front End Developer's Blog

Muhammad Hassan

Full Stack Developer | ASP.NET | MVC | WebAPI | Advanced Javascript | AngularJS | Angular2 | C# | ES6 | SQL | TypeScript | HTML5 | NodeJS, MS candidate @LUMS, Grad & EX-Adjunct Faculty @NUCES-FAST, seasonal blogger & open-source contributor. Seattle, WA.

Software Engineering

Web development


.NET, ASP.NET, C#, MVC, TypeScript, AngularJS

Dominick Baier on Identity & Access Control

Happy DotNetting

In Love with Technology

Knoldus Blogs

Insights and Perspectives to keep you updated


Search - Read - Request - Share

Rahul's space

Learn, Share and Grow with me !

Dhananjay Kumar

Developer Evangelist @Infragistics | MVP @Microsoft | Organizer ng-India, India Angular Conference

SQL Authority with Pinal Dave

SQL Server Performance Tuning Expert

Conficient Blog

Random bits of tech from @conficient

Code! Code! Code!


Code Wala

Designing and coding

Microsoft Mentalist

A way to start with Microsoft Technologies

%d bloggers like this: