Handling loading and error states with Angular’s async pipe

How to deal with loading and error states when using the Angular async pipe

Posted on December 17, 2020



Here’s a simple of way of handling loading and error states when using Angular’s async pipe.

For larger applications I’d create a resuable ‘loading’ component to avoid code duplication. This also makes it easier to update if you need to tweak the markup.


import {Component, OnInit} from '@angular/core';
import {ArticleService} from '../../services/article/article.service';
import {Observable} from 'rxjs';
import {catchError} from 'rxjs/operators';

    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
export class HomeComponent implements OnInit {

    articles: Observable;
    articleErrorObject: {};

    constructor(private _articleService: ArticleService) {

    ngOnInit() {
        this.articles = this._articleService.getArticles().pipe(
            catchError(err => {
                this.articleErrorObject = err;



    <ng-container *ngIf="articles | async as article; else loadingOrError">
        <article *ngFor="let a of article">

    <ng-template #loadingOrError>
        <article *ngIf="articleErrorObject; else isLoading">
            <p>Houston, we have a problem</p>
        <ng-template #isLoading>