Installation & Getting Started

1. Installation

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

npm install ngx-skeleton-suite

---

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 default animation engine, base colors, or flicker delay) at application bootstrap using provideSkeletonConfig:

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideSkeletonConfig({
      animation: 'wave',
      delay: 80,
      minimumDuration: 200,
      baseColor: '#1e293b',
      highlightColor: 'rgba(255, 255, 255, 0.15)',
    }),
  ],
};