// html
<ng-container *ngIf="vm$ | async as vm">
<p *ngIf="vm.user; else userLoading">
Welcome back {{ vm.user }}
</p>
<ng-template #userLoading>
<p>Loading...</p>
<p *ngIf="vm.userError">There was an error: {{ vm.userError }}</p>
</ng-template>
</ng-container>
// component
user$ = this.userService.userErrored$.pipe(
startWith(null),
catchError(() => EMPTY)
);
userError$ = this.userService.userErrored$.pipe(
ignoreElements(),
startWith(null),
catchError((err) => of(err))
);
vm$ = combineLatest([this.user$,this.userError$]).pipe(
map(([user, userError]) => ({user, userError}));
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter