How can I `await` on an Rx Observable?

Question

You have to pass a promise to await. Convert the observable's next event to a promise and await that.

if (condition) {
  await observable.first().toPromise();
}

Edit note: This answer originally used .take(1) but was changed to use .first() which avoids the issue of the Promise never resolving if the stream ends before a value comes through.

As of RxJS v8, toPromise will be removed. Instead, the above can be replaced with await firstValueFrom(observable)

Use the new firstValueFrom() or lastValueFrom() instead of toPromise(), which as pointed out here, is deprecated starting in RxJS 7, and will be removed in RxJS 8.

import { firstValueFrom} from 'rxjs';
import { lastValueFrom } from 'rxjs';

this.myProp = await firstValueFrom(myObservable$);
this.myProp = await lastValueFrom(myObservable$);

This is available in RxJS 7+

See: https://indepth.dev/rxjs-heads-up-topromise-is-being-deprecated/

It likely has to be

await observable.first().toPromise();

As it was noted in comments before, there is substantial difference between take(1) and first() operators when there is empty completed observable.

Observable.empty().first().toPromise() will result in rejection with EmptyError that can be handled accordingly, because there really was no value.

And Observable.empty().take(1).toPromise() will result in resolution with undefined value.

You will need to await a promise, so you will want to use toPromise(). See this for more details on toPromise().