Angular 8Angular 9Javascript

Angular 8 skeleton loader during API call

Angular 8 skeleton loader during API call

Hello to all, welcome again on In this post, I will tell you, Angular 8 skeleton loader during API call.

Angular 8 skeleton loader during API call

Post Working:

In this post, I am showing skelton loader in Angular 8 during API call.

Here is the working code snippet and please follow carefully:

1. Very first, you need to run below commands to install Angular 8 fresh setup:

$ 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. You need to run below command to install Skelton Loader module into your Angular 8 setup:

npm install ngx-skeleton-loader --save

3. You need to add below code into your app.module.ts file:

import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { HttpClientModule } from '@angular/common/http';

 imports: [




4. Now add below code into your app.component.ts file:

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

 export class AppComponent {

skeletonloader = true;
  data: any;
  constructor( private http: HttpClient) {
    this.http.get('http:YourAPiURL').subscribe(data => { = data;
        this.skeletonloader = false;
        }, error => console.error(error));



5. Now add below code into your app.component.html file:


<ngx-skeleton-loader count="5" appearance="circle" *ngIf="skeletonloader"> </ngx-skeleton-loader>
    <div *ngIf="!skeletonloader"><h1>Data Loaded</h1></div>


This is it and if you have any query then please do comment below.


Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL