Sunday, September 20, 2020
therichposts@gmail.com
Angular 8Angular 9Javascript

Angular 8 skeleton loader during API call

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.

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, 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.