Display Spinner While Loading API Data in Angular 8

In this article, we will learn how to display a spinner on the screen till the data gets loaded from an API, using Angular 8 and the HTTPClient service to fetch data from a dummy todos API.

Angular 8 is a robust framework for building web applications. It offers many features that make creating dynamic and interactive user interfaces easy.

Let's use the framework and understand how to show a spinner component conditionally using an example.

Prerequisites

Before proceeding with the steps below, please ensure you have angular CLI installed on your systems, as we would be relying heavily on this in the procedure followed.

Step 1

First, we will create an angular app, and give it any name you like. For this example, we will use the name "my-app".

ng new my-app
cd my-app

Step 2

Let's create a new component that will display the spinner. Use the following command to generate a new component and create a new folder named "spinner" inside the "src/app" folder

ng generate component spinner

Step 3

Open the "spinner.component.html" file and add the following code ?

<div class="spinner">

This code will add the required HTML for the spinner we require to the DOM.

Step 4

Next, open the "spinner.component.css" file and add the following code ?

.spinner {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border-top: 3px solid #3498db;
   border-right: 3px solid transparent;
   animation: spin 1s linear infinite;
}
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

This will create a spinner that we will display while we fetch our data from a server.

Step 5

Now let's use this component to display the spinner while waiting for data to load from an API. Open the "app.component.ts" file and add the following code ?

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   data: any;
   loading?: boolean;

   constructor(private http: HttpClient) { }

   async ngOnInit() {
      this.loading = true;
      await new Promise(resolve => setTimeout(resolve, 2000));
      this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(response => {
         this.data = response;
         this.loading = false;
      });
   }
}

Step 6

Now import the HttpClientModule in your application module. Open the app.module.ts file and paste the below code ?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      AppComponent,
      SpinnerComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Step 7

Finally, open the "app.component.html" file and add the following code ?

<div class="container">
   <div *ngIf="loading" class="spinner-container">
      <app-spinner></app-spinner>
   </div>
   <div *ngIf="!loading">
      <pre>{{ data | json }}</pre>
   </div>
</div>

Conclusion

In this article, we learned how to create an Angular 8 application that displays a spinner on the screen while waiting for data to load from an API. We saw how to use the HttpClient service to fetch data from an API and display it on the screen. We also saw how to create a simple spinner using CSS and display it while waiting for the data to load.