Thursday, August 18, 2022
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

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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