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

interval$.withLatestFrom(indexSubject)
  .subscribe(([i, j]) => {
    this.phrases[j][i].highlighted = true;
     if (i === 12) {
       counter++;
       indexSubject.next(counter);
     }
  });

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
Advertisements


Categories: Angular

Tags:

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:

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: