Angular Observable

Angular Observables

What is an Observable? What is RxJS? Observables in Angular What is Async Pipe? Creating observable Creating observable using Inline Arrow functions Consuming Observable using Subscribe (http) Consuming Observable using async pipe (http) Promises vs Observables

Promises vs Observable

Promise is eager, once they are initialized they trigger the underlying actions and returns the result
Observable is lazy, they don’t trigger until it has a subscriber.

Promises returns only one value
Observable can return multiple values overtime to its subscribers

Promise cannot be canceled, once a promise action is triggered it will execute and return the result
Observable can be canceled, we can call unsubscribe to stop receiving responses from the observable

Promises can be converted to observables, the RxJs library provides a from operator which can convert a promise to an observable. We can use this to deal with some legacy code that is returning promises.

import { from } from 'rxjs';
const myObservable = from(myPromise)

Consuming Observables using async pipe

To consume an Observable using async pipe we need to use the | async syntax in the components view template. In the previous post, we saw how to consume an Observable (response from a http API call) by subscribing to the Observable.

The view template consumes this Observable and displays the response from the http call in the View template. The async pipe automatically subscribes and unsubscribes to the Observable, whenever a new value is emitted from the Observer the async pipe automatically detects the change and refreshes the component.

Consuming Observable using Subscribe

To consume an observable by subscribing, we need to call the subscribe() method and capture the result/error objects returned by the observable. In this sample, we will get a list of users using a http.get call which returns an observable.

Creating observable using Inline Arrow functions

In the previous post we created a separate function and passed it as a parameter to create an Observable. In this post we shall see on how to create an Observable using an inline arrow function.
In the below example we will create an Observable with an inline function which emits the current time, we use setInterval to emit a new value every 1 second.

Creating Observable

We can create our own Observable by creating a function that takes an observer parameter. The function will be passed to create the Observable. When someone subscribes to the observable, the function is called and returns the values emitted from the function.

In the below sample we create a function listGenerator, which takes an observer as a parameter and emit list values one at a time using .next().

Observable in Angular

Angular internally uses Observables for different features, which needs to listen to specific sources and trigger actions based on specific events/values. Angular uses Observables for the following.

What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. RxJS provides an implementation of the Observable type.

RxJS offers a number of functions that can be used to create new observables. These functions can simplify the process of creating observables from things such as events, timers, promises, and so on.

What is an Observable?

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 state changes.  Observables get their name from the Observer design pattern. The Observable sends notifications while the Observer receives them.

Observables in Angular

We saw that are a way of implementing asynchronous streaming operations, where an observable observables can emit multiple values to its subscribers. 

Angular used observables internally for various features like EventEmitters, Http service to implement Ajax calls, and in the routing module to handle route requests.

Angular provides an EventEmitter class that is used when publishing values from a component through the @Output() decorator. EventEmitter extends Observable, adding an emit() method so it can send arbitrary values.

Angular’s HttpClient returns observables from HTTP method calls. Previously we were using promises to implement ajax calls, Angular uses Observables by default.

Router.events provides events as observables. You can use the filter() operator from RxJS to look for events of interest, and subscribe to them in order to make decisions based on the sequence of events in the navigation process.

Below is a sample code implementation of using observables in Angular services to make Ajax calls, and the component code to subscribe and use the data from the observable.

Observable example in Angular 6

An Observable is a way to execute asynchronous operations, in Angular Observable is supported using the RxJs library. An Observable makes an asynchronous request and returns the success response or an error if the request fails. The most common usage of observable is to make API calls to services to get data. Let us see on how to make async calls using observable to get data and display it in UI using Angular.

The Angular HttpClient library by default gives an Observable, let us use the Observable to get API data and display the results in the Component UI.

Let us extend our previous Promise example, we will use the same userdata.service from the previous example and add an Observable to it. This way we can compare the Promise and Observable in the same example code.