Angular 8 skeleton loader during API call

Hello to all, welcome again on therichpost.com. In this post, I will tell you, 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: [
...
 HttpClientModule,
 NgxSkeletonLoaderModule

...

 ]

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 => {
        this.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.

Jas

Thank you