Angular Observables - Simplified

Angular is a popular JavaScript framework for building web applications, and one of the key features of Angular is its use of observables. In this blog post, we will explore what observables are and how they can be used in Angular through code examples.

An observable is a pattern for handling asynchronous data streams, similar to a stream in functional programming. In Angular, observables are used to handle asynchronous data, such as data coming from a server or user input. An observable is a stream of data that can be observed and acted upon by the application.

An observable can be created using the Observable constructor from the RxJS library which is included in Angular. Here is an example of how to create an observable that emits the values 1, 2, and 3:

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Once an observable is created, it can be subscribed to using the subscribe method. This method takes three arguments: an observer object, an error callback, and a completion callback. The observer object has three methods: next, error, and complete. These methods are called when new values are emitted by the observable, when an error occurs, and when the observable completes. Here is an example of how to subscribe to an observable:

observable.subscribe({
  next: value => console.log(value),
  error: error => console.log(error),
  complete: () => console.log('complete')
});

In this example, the next method logs each value emitted by the observable, the error method logs any errors, and the complete method logs a message when the observable completes.

Another way of creating observables is by using the of and from functions from RxJS. The of function creates an observable that emits a set of values, while the from function creates an observable from an array, promise, or iterable. Here is an example of how to use the of and from functions:

import { of, from } from 'rxjs';

const ofObservable = of(1, 2, 3);
const fromObservable = from([1, 2, 3]);

ofObservable.subscribe(console.log);
fromObservable.subscribe(console.log);

In this example, both ofObservable and fromObservable will emit the same values, but the from function is more versatile as it can take different types of input.

Observables are powerful because they allow you to work with asynchronous data in a way that is similar to working with synchronous data. They also allow you to handle multiple values over time and to compose multiple observables together. One of the key benefits of using observables in Angular is that they provide a way to handle asynchronous data without the need for callback functions. This can make your code more readable and maintainable, as it avoids the "callback hell" that can occur when using callbacks to handle asynchronous data.

Another benefit of observables is that they can be easily used with the async pipe. The async pipe is a built-in Angular pipe that can be used to subscribe to an observable and automatically update the view when new values are emitted. Here is an example of how to use the async pipe:

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
selector: 'app-root',
template: <div *ngIf="data$ | async as data"> {{ data }} </div> })
export class AppComponent {
data$ = of(1, 2, 3);
}

In this example, we have an `AppComponent` class that has a property called `data$` which is an observable that emits the values 1, 2, and 3. In the template, we use the async pipe to subscribe to the `data$` observable and bind the value to a local variable `data`. The `*ngIf` directive is used to only show the div element when there is data available. Once the component is rendered, the async pipe will automatically subscribe to the observable and update the view each time a new value is emitted. This way, we can handle asynchronous data in the template without having to manually subscribe and unsubscribe to the observable.