Installation & Getting Started

1. Installation

Install ngx-skeleton-suite from npm using your package manager of choice:

npm install ngx-skeleton-suite

The suite ships a dependency-free native CSS renderer by default, so no UI library is required. If you want to render with PrimeNG or Angular Material, install that adapter’s peer as well:

# PrimeNG adapter
npm install primeng

# Material adapter (community package)
npm install ngx-skeleton-loader

---

2. Import in Standalone Components

In Angular v14+ standalone components, import SkeletonDirective directly into your component’s imports array:

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

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [SkeletonDirective],
  template: `
    <section>
      <button (click)="isLoading.set(!isLoading())">Toggle Loading</button>

      <div *skeleton="isLoading(); preset: 'profile-card'">
        <div class="user-profile">
          <img src="/avatar.jpg" alt="User Avatar" class="avatar" />
          <h2>Alex Rivera</h2>
          <p>Lead Engineer</p>
        </div>
      </div>
    </section>
  `
})
export class ProfileComponent {
  readonly isLoading = signal(true);
}

---

3. Global Configuration Provider (Optional)

Configure default global settings (such as the default animation mode or flicker delay) at application bootstrap using provideNgxSkeleton:

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgxSkeleton({
      animation: 'adapter-default',
      delayMs: 80,
      minimumDurationMs: 200,
      fadeInMs: 180,
      preserveLayout: true,
    }),
  ],
};

---

4. Renderer Adapters (Optional)

By default skeletons are rendered with the built-in native CSS renderer. To render with a UI library, register the matching adapter provider. The directive, presets, grids, and animation modes stay identical.

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(), // renders with <p-skeleton>
  ],
};

// Material adapter (backed by ngx-skeleton-loader)
import { provideMaterialSkeleton } from 'ngx-skeleton-suite/material';

Adapter	Provider	Entry point	Peer dependency
Native CSS (default)	none required	ngx-skeleton-suite	—
PrimeNG	providePrimeNgSkeleton()	ngx-skeleton-suite/primeng	primeng
Material	provideMaterialSkeleton()	ngx-skeleton-suite/material	ngx-skeleton-loader