ngx-skeleton v16.0.0

ngx-skeleton

Angular placeholder preview component before the content is loaded.

Environment Support

• Angular 6+
• Server-side Rendering

Compatibility

Versions compatibility list:

Installation

npm i ngx-skeleton

OR

yarn install ngx-skeleton

Demo

Demo page

Usage

Import NgxSkeletonModule into the current module's imports:

import { NgxSkeletonModule } from 'ngx-skeleton';

imports: [
  // ...
  NgxSkeletonModule,
],

You can also import NgxSkeletonComponent as standalone component:

import { NgxSkeletonComponent } from 'ngx-skeleton';

@Component({
  standalone: true,
  imports: [NgxSkeletonComponent],
  // ...
})
export class MyComponent {}

Use in your components (this is code example from demo page):

<ng-container *ngIf="!isLoading; else loadingContent">
  <h5>{{ movie.title }}</h5>
  <h6 class="text-black-50">{{ movie.date }}</h6>
</ng-container>
<ng-template #loadingContent>
  <ngx-skeleton height="24px" margin="0 0 8px 0" width="50%"></ngx-skeleton>
  <ngx-skeleton height="19px" margin="0 0 8px 0"></ngx-skeleton>
</ng-template>

API

Inputs

License

MIT