NGX-SKELETON SUITE

Key Features

Renderer Adapters

Dependency-free native CSS by default. Opt into PrimeNG or Angular Material renderers, or add your own via the documented SkeletonRendererComponent contract.

Zero-CLS Layout Preservation

Automatically measures real component bounding boxes before loading and reserves height/width, preventing Cumulative Layout Shift (CLS).

7 Built-in Composite Presets

Instant complex shapes: card, profile-card, avatar, list-item, paragraph, table-row, and image-card.

Dynamic CSS Grid Engine

Generate multi-column skeleton grids on the fly with auto-fit minimum widths or responsive breakpoint objects ({ sm: 2, md: 4, lg: 6 }).

Universal Async & Signal Binding

Seamlessly unwrap Promises, RxJS Observables, and Angular Signals directly via directive microsyntax *skeleton="let user from user$".

---

Quick Installation

npm install ngx-skeleton-suite

The built-in native CSS renderer needs no UI library. To render with a UI framework, install its adapter peer and register the provider:

# PrimeNG adapter (use the PrimeNG major matching your Angular major)
npm install primeng
# Material adapter (community package)
npm install ngx-skeleton-loader

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideNgxSkeleton } from 'ngx-skeleton-suite';
import { providePrimeNgSkeleton } from 'ngx-skeleton-suite/primeng';

export const appConfig: ApplicationConfig = {
  providers: [provideNgxSkeleton(), providePrimeNgSkeleton()],
};

import { Component } from '@angular/core';
import { SkeletonDirective } from 'ngx-skeleton-suite';

@Component({
  standalone: true,
  imports: [SkeletonDirective],
  template: `
    <div *skeleton="isLoading; preset: 'card'">
      <app-user-card />
    </div>
  `
})
export class UserComponent {
  isLoading = true;
}