Presentation of information with loading and error scenarios

Question

Presentation of information with loading and error scenarios

How can we effectively display data in an Angular view, considering loading state and error handling?

Imagine we are fetching a set of documents from our backend and need to present them in an Angular view. We want to address three possible scenarios by providing corresponding messages to the user:

Loading your data...
Error trying to retrieve your data!
Data retrieved successfully!

Currently, my approach involves displaying both the "loading" and "error" messages briefly during the data retrieval process.

I am curious about how others tackle this common scenario. Is it feasible to manage this by manipulating the myDocs variable, or should I introduce another variable for better control?

Typescript Implementation (TS)

export class MyDocsComponent implements OnInit {

    myDocs: IMyDoc | null;

    ngOnInit() {

        // fetch myDocs
        this.myDocsService.getMyDocs()

        // if successful
        .then( myDocs => { this.myDocs = myDocs; })

        // if there's an error while retrieving myDocs from the service
        .catch( error => {
            // What actions should be taken here?
            // How can this be managed in the view 
            // to inform the user that data retrieval failed?
            // And also display a loading message prior to this.

            // Currently, I am using:
            this.myDocs = null;
            // However, this results in the error message 
            // being displayed prematurely during data loading.
        });
    }
}

HTML Markup (HTML)

<!-- Loading State -->
<div class="loading" *ngIf="!myDocs">
    Loading your data...
</div>

<!-- Error State -->
<div class="error" *ngIf="myDocs==null">
    Error trying to retrieve your data!                         
</div>

<!-- Success State -->
<div class="success" *ngIf="myDocs">
    Data retrieved successfully!
    <div class="list" *ngFor="let d of myDocs">{{ d.title }}</div>
</div>

angular typescript

Answer 1

Answer №1

Here is an example you can try out

file.component.ts

export class MyDocsComponent implements OnInit {

  myDocs: IMyDoc | null;

  state: 'loading' | 'loaded' | 'error' = 'loading';

  isLoading() {
    return this.state === 'loading';
  }

  isError() {
    return this.state === 'error';
  }

  isLoaded() {
    return this.state === 'loaded';
  }

  ngOnInit() {
    this.myDocsService.getMyDocs()
      .then(myDocs => {
        this.myDocs = myDocs;
        this.state = 'loaded';
      })
      .catch(error => {
        console.log(error);
        this.state = 'error';
      });
  }
}

file.component.html

<div *ngIf="isLoading"  class="loading">
  Loading your data...
</div>

<div *ngIf="isError" class="error">
  Error trying to retrieve your data!
</div>

<div *ngIf="isSuccess" class="success" >
  Data retrieved successfully!
  <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
  </div>
</div>

Answer 2

Here is an example you can try out

file.component.ts

export class MyDocsComponent implements OnInit {

  myDocs: IMyDoc | null;

  state: 'loading' | 'loaded' | 'error' = 'loading';

  isLoading() {
    return this.state === 'loading';
  }

  isError() {
    return this.state === 'error';
  }

  isLoaded() {
    return this.state === 'loaded';
  }

  ngOnInit() {
    this.myDocsService.getMyDocs()
      .then(myDocs => {
        this.myDocs = myDocs;
        this.state = 'loaded';
      })
      .catch(error => {
        console.log(error);
        this.state = 'error';
      });
  }
}

file.component.html

<div *ngIf="isLoading"  class="loading">
  Loading your data...
</div>

<div *ngIf="isError" class="error">
  Error trying to retrieve your data!
</div>

<div *ngIf="isSuccess" class="success" >
  Data retrieved successfully!
  <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
  </div>
</div>

Answer 3

Answer №2

Here is an alternative solution to address the issue at hand. In response to the OP's request, I have relocated it to a different answer. Please refrain from upvoting this.

This method involves leveraging some more advanced features in Angular such as

async pipe,
<ng-container>,
as keyword within the *ngIf statement,
else loading paired with <ng-template #loading>.

component.ts

export class MyDocsComponent implements OnInit {
  myDocs$: Promise<IMyDoc | string>;

  ngOnInit() {
    this.myDocs$ = this.myDocsService.getMyDocs()
      .then(response => {
        console.log('Data retrieved successfully');
        return response;
      })
      .catch(error => {
        console.log(error);
        return 'An error occurred';
      });
  }

  isError(resp: IMyDoc | string) {
    return typeof resp === 'string';
  }

  isSuccess(resp: IMyDoc | string) {
    return typeof resp !== 'string';
  }
}

component.html

<div *ngIf="myDocs$ | async as myDocs; else loading">
  <ng-container *ngIf="isSuccess(myDocs)">
    <div class="success"
      Data retrieved successfully!
      <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="isError(myDocs)">
    <div class="error">
      Error retrieving data!
    </div>
  </ng-container>
</div>

<ng-template #loading>
  <div *ngIf="isLoading" class="loading">
    Loading data...
  </div>
</ng-template>

Answer 4

Here is an alternative solution to address the issue at hand. In response to the OP's request, I have relocated it to a different answer. Please refrain from upvoting this.

This method involves leveraging some more advanced features in Angular such as

async pipe,
<ng-container>,
as keyword within the *ngIf statement,
else loading paired with <ng-template #loading>.

component.ts

export class MyDocsComponent implements OnInit {
  myDocs$: Promise<IMyDoc | string>;

  ngOnInit() {
    this.myDocs$ = this.myDocsService.getMyDocs()
      .then(response => {
        console.log('Data retrieved successfully');
        return response;
      })
      .catch(error => {
        console.log(error);
        return 'An error occurred';
      });
  }

  isError(resp: IMyDoc | string) {
    return typeof resp === 'string';
  }

  isSuccess(resp: IMyDoc | string) {
    return typeof resp !== 'string';
  }
}

component.html

<div *ngIf="myDocs$ | async as myDocs; else loading">
  <ng-container *ngIf="isSuccess(myDocs)">
    <div class="success"
      Data retrieved successfully!
      <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="isError(myDocs)">
    <div class="error">
      Error retrieving data!
    </div>
  </ng-container>
</div>

<ng-template #loading>
  <div *ngIf="isLoading" class="loading">
    Loading data...
  </div>
</ng-template>

Presentation of information with loading and error scenarios

Answer №1

Answer №2

Similar questions

Tips for registering a provider in Angular 2 using dynamic data during runtime

After downloading the quickstart (angularjs2) from angular.io, I encountered an error when trying to start npm

All constructors at the base level must share a common return type

I'm encountering an issue where the npm install process is getting stuck while attempting to extract the xxxx package

The browser automatically adds a backslash escape character to a JavaScript object

Developing a search feature using Angular 6 with Observable subscription for the FrontEnd application

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

String Compression - Number of Elements

Creating mock objects with Jest

Can you point me in the right direction for declaring the ImageObject format in Angular?

Connecting the mat-progress bar to a specific project ID in a mat-table

Adapting Angular routes in real-time using observable state modifications

Designing a dynamic class object for a material table

Utilizing the axios create method: troubleshooting and best practices

What is the process for changing the text in a text box when the tab key on the keyboard is pressed in

Including the --aot flag in the Angular CLI can cause issues with the app

solution for downloading large files from authenticated endpoint that works across multiple web browsers

TypeScript: Defining an Array Type within a Namespace or Module

Build a Node.js application using TypeScript and all necessary dependencies

What are some secure methods for integrating iframes into an Angular 7 project?