Angular 14 simple-ng-loader Example to Show Loading Spinner Progressbar After HTTP Requests to API

Welcome folks today in this blog post we will be showing loading spinner progressbar after http request in angular 14 using simple-ng-loader library using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new angularloader

cd angularloader

And now we need to install the below libraries using the below command as shown below

npm i simple-ng-loader

Now first of all we need to include the httpclientmodule inside the app.module.ts file of your angular project. This module is required for making http requests inside the angular project

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { SimpleNgLoaderModule } from 'simple-ng-loader';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  imports:      [ BrowserModule, FormsModule ,
   SimpleNgLoaderModule,
   HttpClientModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

import { SimpleNgLoaderModule } from 'simple-ng-loader';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

imports: [ BrowserModule, FormsModule ,

SimpleNgLoaderModule,

HttpClientModule],

declarations: [ AppComponent, HelloComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Now we need to edit the app.component.html file and copy paste the html code as shown below

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Click  the button  to see some magic happen :)
</p>
<simple-ng-loader  type="bar"  delayTime=5000></simple-ng-loader>
<button (click)="callApi()">Click</button>

<p>

Click the button to see some magic happen :)

</p>

<simple-ng-loader type="bar" delayTime=5000></simple-ng-loader>

<button (click)="callApi()">Click</button>

As you can see we are displaying the ng-loader component here we are showing the bar loading animation progressbar. It can have various types of loading bar animations and also we are providing the delayTime of the animation. And then we have the button to call the http request and get the data.

Now we need to edit the app.component.ts file of the angular project as shown below

app.component.ts

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
 
@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
    constructor(private http: HttpClient) { }
      callApi() {
    this.http.get('https://reqres.in/api/users?page=2')
      .subscribe(data => {
        console.log(data);
      })
  }
 
 
}

import { Component, Input } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'hello',

templateUrl: './hello.component.html',

styles: [`h1 { font-family: Lato; }`]

})

export class HelloComponent {

@Input() name: string;

constructor(private http: HttpClient) { }

callApi() {

this.http.get('https://reqres.in/api/users?page=2')

.subscribe(data => {

console.log(data);

})

}