How to handle errors REACTIVELY with the async pipe

In this video, we take a look at how to handle errors from RxJS observable streams reactively when using the async pipe in Angular.

0:00 Introduction
1:38 The problem
2:54 Basic error handling
4:41 Using a view model
6:29 Multiple values
7:47 Conclusion

#angular #rxjs #ionic

[Fyasco_AlanChoufa]

Separate streams.. so simple and so reactive ! Love this !

[coreytollerud]

Assuming cold observables, doesn't using both user$ and userError$ in the view cause two subscriptions to user$ (i.e. maybe double-fetching data from the server?)

[diehypotenuse]

solved my daily evening problems in 15 minutes. thats awesome <3

[KamelJabber]

I've been hooked on your videos lately, thanks! Good stuff!

[rafiquemohammed]

Alternatively you can simply combine all the observables and use it as a vm$ . for ex: const vm$=combineLatest(obs1, obs2, ...obsN) and in html <... *ngIf="vm$ | async as vm"> to keep more clean and readable

[wangguanghui]

Great video! I wonder if it's possible to extract this loading error and data pieces in a reusable component? The data is projected into ng-content so we can focus on the data.

[RobertLejeuneQc]

Really helpful, thank you for sharing!

[shemmuthanga]

Great approach, Josh. Could you make a follow up video showing how one can update the data e.g deleting/adding an item in an array, pagination. Thanks

[Dorchwoods]

To add to this, in the app I'm working on, the card could have 4 states: success state (showing data), a loading state, the error state, empty state. So basically showing some sort of graphic and a message that says 'No users' if !users.length. Thoughts on how to best handle that? I've never found a good, clean way of handling that without bringing in NGRX, which most of the time is overkill on small applications

[lautarobernati]

Couldn't you just mutate the original observable with the throwError function and return an empty response, so that the original observable doesn't error out, and the async pipe doesn't break? Rather than managing errors on a separate observable? Great video anyway

[tommclellan]

Great stuff, thanks for this example!

[leonardopillay]

Hi there i love your videos. Can you do an implementation of a login screen with a ion menu and nested routing in an application

[ttma]

is this two async on the same stream？which means subscribing on the same stream twice？