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