How to use Reactive Programming RxJS Library with Angular 4
This post will demonstrate how to use the reactive programming RxJS library with Angular 4.
Basic concepts of the Reactive Programming
From Wikipedia:
In computing, reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change.
One of the most widely used reactive programming pattern is the Observer Pattern:
The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
ReactiveX is an API that, among other things, makes use of this pattern. It has implementations for several languages, one being RxJS (Reactive eXtensions for JavaScript).
How we use it at WASSA ?
All of our Angular projects use RxJS for the following:
- Combined with AJAX requests, make our websites dynamic and avoid reloading the pages for every single user action.
- Chain multiple AJAX calls
- Manage communication between components
Use case:
The use case below will explain how we can change the language of a website on the fly, without the need to reload the page.
Language service
First we need to create a service that will hold an Observable with RxJS.
Two interesting lines :
- public nextLanguage: Subject;: declares nextLanguage as an Observable that will emit string values. You may have noticed it’s declared as a Subject and not as Observable. In RxJS, a Subject is both an observable and an observer. We will not go into more details here but this can become very handy in many situations.
- this.nextLanguage.next(language); emits the next value (language) to all nextLanguage observers
Menu Component
Next, we define a component that will display a menu to change the language. Nothing fancy here, it’s pure Angular:
The setLocale simply method calls the changeLanguage method of our service.
Component template
Now we created a very simple menu to change locale. Each menu item calls selectLocale with the language as parameter.
Homepage Component
Finally we need a component that will observe then changes on nextLanguage and updates the display when the language is changed. Also, we define a default language.
The key point is the call of subscribe on nextLanguage. It makes our component an observer.
Et voilà !
When nextLanguage emits a new value, the code inside the arrow function will be called. In our example, it will trigger an API call that will get news for the new language (as you can see, we also have an observer on this…). It’s a kind of magic !
Do you want to know more about WASSA?
WASSA is an Innovative Digital Agency expert in Indoor Location and Computer Vision. Whether you are looking to help your customers to find their way in a building, enhance the user experience of your products, collect data about your customers or analyze the human traffic and behavior in a location, our Innovation Lab brings scientific expertise to design the most adapted solution to your goals.
Find us on:
