Understanding Observables and Promises in Angular

In Angular, you often need to work with asynchronous data, whether it be to handle HTTP requests or to perform some other task that requires time to complete. To handle asynchronous data, you can use either observables or promises in Angular.

Observables

Observables are a way to handle asynchronous data streams in Angular. They are a part of the RxJS library and provide a way to subscribe to data streams and react to changes.

Observables are created using the of, from, or create operator. For example:

import { of } from 'rxjs';

const observable = of(1, 2, 3);

This creates an observable that emits the values 1, 2, 3 in sequence. You can subscribe to an observable using the subscribe method:

observable.subscribe(val => console.log(val));

This will log the values 1, 2, 3 to the console. Observables can also be cancelled using the unsubscribe method:

const subscription = observable.subscribe(val => console.log(val));

subscription.unsubscribe();

Observables can also be used with the async pipe in templates to automatically unsubscribe when the component is destroyed:

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

@Component({
  selector: 'app-observable',
  template: `
    <p>{{ observable | async }}</p>
  `
})
export class ObservableComponent {
  observable = of(1, 2, 3);
}

Promises

Promises are another way to handle asynchronous data in Angular. They represent the result of an asynchronous operation that will either resolve with a value or reject with an error.

Promises are created using the Promise constructor:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Hello World'), 1000);
});

This creates a promise that will resolve with the value 'Hello World' after 1 second. You can use the then method to handle the resolved value:

promise.then(val => console.log(val));

This will log 'Hello World' to the console. You can also use the catch method to handle any errors that may occur:

promise.catch(err => console.error(err));

Promises can also be used with the async pipe in templates:

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

@Component({
  selector: 'app-promise',
  template: `
    <p>{{ promise | async }}</p>
  `
})
export class PromiseComponent {
  promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hello World'), 1000);
  });
}

Similarities and Differences

Observables and promises have some similarities and differences. Both can be used to handle asynchronous data and both can be used with the async pipe in templates.

One major difference between observables and promises is that observables can emit multiple values over time, while promises can only resolve or reject once. This means that observables are better suited for handling continuous streams of data, while promises are better suited for one-time async operations.

Another difference is that observables provide a way to cancel the subscription, while promises do not. This can be useful in certain scenarios where you want to stop listening to an observable before it completes.

Wrapping Up

In this tutorial, we learned about observables and promises in Angular and saw some examples of how to use them. We also explored the similarities and differences between the two, including when it is appropriate to use each. Understanding how to work with async data is an important skill for building robust and performant Angular applications.