// 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