How to convert Promise to Observable in Angular?

Angular, a popular JavaScript framework for building web applications, relies on Observables and Promises to handle asynchronous data streams effectively.

What is an Observable?

An Observable is a data stream producer that emits multiple values over time to its observers (consumers). It represents a series of events that can be observed and processed asynchronously. In Angular, Observables are created using the RxJS library and can be subscribed to using the Observer pattern.

What is a Promise?

According to MDN (Mozilla Developer Network):

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A Promise represents the result of an asynchronous operation that will be resolved with a single value or an array of values.

Differences between Observables and Promises

While Observables and Promises appear similar, they have distinct differences:

• Promises represent a single event or value, while Observables represent a stream of events that can occur in any order and at any time.
• Promises are eager and start executing immediately upon creation, while Observables are lazy and only execute when subscribed to.

Converting Promise to Observable in Angular

By default, Angular’s HTTP client methods return Observables. However, if you have a function that returns a Promise and you want to convert it to an Observable, the process is straightforward. Follow these steps:

Step1:

Import the from operator from the rxjs library:

import { from } from 'rxjs';

Step2:

Wrap the Promise using the from operator to convert it into an Observable:

const observable = from(promise);

Now, you have successfully converted the Promise to an Observable.

Converting Observable to Promise

Conversely, if you have an Observable and need to convert it back to a Promise, you can use the .toPromise() method. Here’s an example:

import { from } from 'rxjs';

const observable = from(someData);
const promise = observable.toPromise();

The .toPromise() method will return a Promise that resolves with the last emitted value from the Observable.