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
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
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); }) } } |