Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 circle progress bar during api call.
Post Working:
In this post, I am showing progress bar loader in Angular 8 during API call.
Here is the working code snippet and please follow carefully:
1. Very first, here are common basics steps to add angular 8 application on your machine:
$ npm install -g @angular/cli $ ng new angularloader // Set Angular8 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 8 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
