This service uses the @healthcatalyst/cashmere design library.
The module that provides ToastInfoService should import CashmereModule from @healthcatalyst/cashmere and BrowserModule from @angular/platform-browser.
To use the service's followObservable method, choose any action in your app that results in an Observable, e.g. a user clicks a button which triggers an API call.
Before:
clickSubmit(): void {
this.apiService.doSubmit().pipe(
filter(result => result.status === 200),
take(1)
).subscribe(result => {
alert(`Submitted! Response was: ${result.message}`);
});
}After:
clickSubmit(): void {
this.toastInfoService.followObservable(
() => this.apiService.doSubmit(),
'Submitting data'
).pipe(
filter(result => result.status === 200),
take(1)
).subscribe(result => {
alert(`Submitted! Response was: ${result.message}`);
});
}All you have to do is wrap your Observable-producing method in a followObservable call and name it (use the format "doing thing"). ToastInfoService will handle a loading toast, a success toast, and an error toast with a Try Again button. If your subscriber specifies an error method, that method will be called only when an error toast disappears without the user clicking Try Again.
An optional third argument to followObservable is an object with three fields:
showSpinner: Defaults to true. If false, will not show a Loading toast while the Observable is waiting for a response.showSuccess: Defaults to true. If false, will not show a Success toast if the Observable succeeds. This is good for situations where success is either assumed (e.g. initial page load) or self-evident (e.g. route change).tryAgain: Defaults to true. If false and the Observable throws an error, the error toast will not have a "Try Again" button and any error subscribers will be called immediately.