How to convert Observable to Promise in angular|Typescript

Sometimes, We want to convert the observable to a promise object and call callback then() on the promise in Angular. Observable returns multiple values and promise returns single values. You can check other posts on How to always run some code when a promise is resolved or rejected

Observable is more feature-rich than promises and recommended. However, some cases need to convert to promises.

• You have to pass data to a third-party API that accepts only promises

How to Convert Observable to Promise in Angular

There are multiple ways we can do

• use the toPromise method

Observable has the toPromise() method that subscribes to observable and returns the promise.

Note: Please make sure that the observable should complete the operation, Otherwise, It struck forever and causes memory errors.

Here is a syntax

Observable.toPromise()
      .then();

Here is a complete example to convert to promise in Angular.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private myarray: string[] = ["test", "test2", "test3"]
  strings$: Observable<string[]> = of(this.myarray);
  array1$: Observable<string[]> = of(this.myarray).pipe(delay(5000));

  constructor() {
    console.log("start")

    const example = this.array1$.toPromise()
      .then(item => {
        console.log('Returned Promise value:', item);
      });

    console.log("end")
  }

}

Output:

start
end
Returned Promise value: (3)['test', 'test2', 'test3']

toPromise() is deprecated in rxjs7 version.

Rxjs provides lastValueFrom and firstValueFrom methods to convert promises.

lastValueFrom() used in place of toPromise() that return the stream of data

  public async getPromiseUseLast() {
    const promiseVar = await lastValueFrom(this.array1$);
    console.log('Returned lastValueFrom usage value:', promiseVar);

    return promiseVar;
  }

firstValueFrom() does not consider a stream of data, takes the first data, and unsubscribes from the stream.

public async getPromiseUseFirst() {
  const promiseVar = await firstValueFrom(this.array1$);
  console.log('Returned firstValueFrom usage value:', promiseVar);

  return promiseVar;
}

Conclusion

In a summary,

Observable is more advanced and feature-rich than a promise, Some times need to convert the promise into Angular.