Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on February 12, 2023

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

 

 

1
2
3
4
5
6
<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>

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
      })
  }
}

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme