Tell Me I'm Wrong, Please (Angular and Async)

I'll try and keep this quick. I'm updating one of my Pluralsight courses and I am curious if what I'm thinking makes any sense.

I've been teaching the same approach as most of the other Angular instructors, but I feel like it's not as clear as it should be. Let's look at a simple example of making a network call and showing state. I have a simple view that shows two strings. I am using a central service for calling the remote server with HttpClient. Here's the call using Reactive:

 loadReactive(): Observable<boolean> { return this.http.get<ResultData>(this.URL) .pipe( map((data: ResultData) => { this.reactiveResult = data.title; return true; })); } 

In the component, I can just subscribe to the change:

 onLoadReactive() { this.store.loadReactive() .subscribe(s => console.log("Success"), e => console.log("Failure")); } 

All the nesting makes this hard to read in my opinion. I am thinking of showing the async/await pattern instead. Here would be the call in the service:

 async loadAsync(): Promise<boolean> { const result = await this.http.get<ResultData>(this.URL) .toPromise(); this.asyncResult = result.title; return true; } 

Longer but clearer I think. And in the component:

 async onLoadAsync() { try { if (await this.store.loadAsync()) { console.log("Sucess"); } else { console.log("Failure") } } catch { console.log("Failure") } } 

I plan on teaching both, but is Angular moving away from the subscribe model to async/await now that it exists or are people sticking with it?

Please help me tell the right story to new Angular users!

This work by Shawn Wildermuth is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Based on a work at wildermuth.com.

If you liked this article, see Shawn's courses on Pluralsight.