Loader On Every API Call In Angular

Introduction:

A loading indicator is a visual animation that conveys processing or loading. In this article, we will show the loader indicator on every HTTP request.

We will use the FakeStoreAPI requests for testing purposes.

Get Started:

Step 1: Set up your Angular project.

First of all, set up the angular CLI by writing this command.

npm install -g @angular/cli

Create a new project after installing Angular CLI…

ng new http-loader

Step 2: Add dependency.

In this article, we will use ng-http-loader to show the loader on every HTTP request. So install it first by writing the following command.

npm install ng-http-loader --save

Step 3: Import ng-http-loader in the Main Module file.

Go to the app.module.ts file and write the following code.

import { HttpClientModule } from '@angular/common/http';
import { NgHttpLoaderModule } from 'ng-http-loader';
.
.
.
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    .
    .
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note that it is also necessary to import the HttpClientModule in the Module file.

Step 4: Add the following code to the app.component.html file.

<ng-http-loader [spinner]="spinkit.skWave"></ng-http-loader>
<div class="button-container">
    <button (click)="getAllProducts()">Get products</button>
    <button (click)="getAllCarts()">Get carts</button>
    <button (click)="getAllUsers()">Get users</button>
</div>

Notice that, you are adding the <ng-http-loader></ng-http-loader> in app.component.html So it does not mean that you get loader when an HTTP call is initiated from the main component. You will get this loader in your entire Angular application.

 Step 5: Add the following code to the app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public spinkit = Spinkit;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }

  getAllProducts() {
    this.http.get<any>('https://fakestoreapi.com/products').subscribe({
      next: (res) => {
        console.log(res);
      },
      error: (err) => {
        console.log(err);
      }
    });
  }

  getAllCarts() {
    this.http.get<any>('https://fakestoreapi.com/carts').subscribe({
      next: (res) => {
        console.log(res);
      },
      error: (err) => {
        console.log(err);
      }
    });
  }

  getAllUsers() {
    this.http.get<any>('https://fakestoreapi.com/users').subscribe({
      next: (res) => {
        console.log(res);
      },
      error: (err) => {
        console.log(err);
      }
    });
  }

}

Finally, save your code and see the magic on the browser! You can also check more events and styles of this npm by clicking here.