Sometimes, We want to convert observable to promise object and call callback then() on the promise in Angular. Observable returns multiple values and promise return single values.
Observable is 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 an 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 promise.
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 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 promise into Angular.