What is Skeleton Screen?



• Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.
• For getting started an Angular application you needs two things as Prerequisites.

How to set Skeleton Loader



• there is a loader section in starting of html pages. you can remove it by just delete that section.

html files

<div class="skeleton-loader" [style.display]="skeletonService.isSkeleton ? 'none' : 'block'">
</div>
                        

skeleton service file

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class SkeletonService {

  public isSkeleton: boolean;

  constructor( private router: Router) {
    this.router.events.subscribe(() => {
      setTimeout(() => {
        this.isSkeleton = true;
      }, 4000)
      this.isSkeleton = false;
    });
    setTimeout(() => {
      this.isSkeleton = true;
    }, 4000)
    this.isSkeleton = false;
  }
}