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

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.

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.

What is Async Pipe?

Async Pipe is an impure pipe which helps to make it easier to work with Observables. The Async Pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

For promises, it automatically calls the "then" method.
For observables, it automatically calls subscribe and unsubscribe.

To use the Async Pipe to handle observables in Angular template we use | async followed by the observable, this will automatically subscribe to the observable and refreshes the component whenever a new value is emitted from the observable.

AsyncPipe uses the OnPush change detection out of the box. We need to make sure that all our business logic is immutable and always returns new objects.

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.