Angular 9 circle progress bar during api call

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 9 circle progress bar during api call.

Post Working:

In this post, I am showing progress bar loader in Angular 9 during API call.

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angularloader // Set Angular 9 Application on your pc

cd angularloader // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

2. Now run below command into your terminal to include progress bar package into your angular 9 application:

npm install ng-circle-progress --save

3. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgCircleProgressModule } from 'ng-circle-progress';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#78C000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Add, below code into your app.component.ts file:

import { Component } from '@angular/core';
import { HttpClient} from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngrx';
  showSpinner = true;
  data: any;
  constructor(private http: HttpClient) {
    this.http.get('http://YourApiAddress').subscribe(data => {
        this.data = data;
        this.showSpinner = false;
        }, error => console.error(error));
   }
}

5. Finally add below code into app.component.html file:

<circle-progress *ngIf="showSpinner"
  [percent]="100"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="10000"
></circle-progress>

This is it and if you have any kind of query then please let me know. Don’t forget to run ng serve command.

Jas

Thank you