// 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}));