The updated Angular's use of observables is a game-changer. No more long chains of .done().fail().always()
like in JQuery - NG2 simplifies it all with the | async pipe
. However, what happens if something goes wrong while loading data for myObservable
? Is there a way to detect and handle failure in the template?
// sample.component.ts
class SimpleComponent{
myObservable:Observable<string>;
constructor(private _someService:SomeService){
myObservable = _someService.getSomeDataByHttp();
}
}
// simple.component.html
<div>
<div>
{{myObservable | async}}
</div>
<div (anyErrorInObservable)="myObservable"> // Is there a way to show an error message if the observable fails?
Oops, an error occurred while fetching myObservable.
</div>
</div>
I know handling this can be done using .catch()
, but I'm curious if there's a more elegant solution out there.
Thanks in advance!