Shimmer

Angular Guide

Learn how to use Shimmer From Structure with Angular 19+.

Installation

npm install @shimmer-from-structure/angular

Basic Usage

Static Content

import { Component, signal } from '@angular/core';
import { ShimmerComponent } from '@shimmer-from-structure/angular';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [ShimmerComponent],
  template: `
    <shimmer [loading]="isLoading()">
      <div class="card">
        <img src="avatar.jpg" class="avatar" />
        <h2>John Doe</h2>
        <p>Software Engineer</p>
      </div>
    </shimmer>
  `,
})
export class UserCardComponent {
  isLoading = signal(true);
}

Dynamic Content with templateProps

import { Component, signal } from '@angular/core';
import { ShimmerComponent } from '@shimmer-from-structure/angular';
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ShimmerComponent, UserCardComponent],
  template: `
    <shimmer [loading]="loading()" [templateProps]="{ user: userTemplate }">
      <app-user-card [user]="user() || userTemplate" />
    </shimmer>
  `,
})
export class AppComponent {
  loading = signal(true);
  user = signal<User | null>(null);

  userTemplate = {
    name: 'Loading...',
    role: 'Loading role...',
    avatar: 'placeholder.jpg',
  };
}

Global Configuration

Use Angular's dependency injection to set global defaults:

// main.ts or bootstrapApplication
import { bootstrapApplication } from '@angular/platform-browser';
import { provideShimmerConfig } from '@shimmer-from-structure/angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideShimmerConfig({
      shimmerColor: 'rgba(56, 189, 248, 0.4)',
      backgroundColor: 'rgba(56, 189, 248, 0.1)',
      duration: 2.5,
      fallbackBorderRadius: 8,
    }),
  ],
});

Accessing Config

import { Component, inject } from '@angular/core';
import { injectShimmerConfig } from '@shimmer-from-structure/angular';

@Component({
  selector: 'app-my-component',
  template: `<div [style.background]="config.backgroundColor">...</div>`,
})
export class MyComponent {
  config = injectShimmerConfig();
}

Examples

Dashboard with Multiple Sections

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [ShimmerComponent, CommonModule],
  template: `
    <div class="dashboard">
      <!-- User Profile -->
      <section class="dashboard-section">
        <shimmer [loading]="loadingUser()" [templateProps]="{ user: userTemplate }">
          <app-user-profile [user]="user() || userTemplate" />
        </shimmer>
      </section>

      <!-- Stats Grid -->
      <section class="dashboard-section">
        <shimmer
          [loading]="loadingStats()"
          [templateProps]="{ stats: statsTemplate }"
          shimmerColor="rgba(20, 184, 166, 0.2)"
        >
          <app-stats-grid [stats]="stats() || statsTemplate" />
        </shimmer>
      </section>

      <!-- Transactions List -->
      <section class="dashboard-section">
        <shimmer [loading]="loadingTransactions()" [templateProps]="{ transactions: transactionsTemplate }">
          <app-transactions-list [transactions]="transactions() || transactionsTemplate" />
        </shimmer>
      </section>
    </div>
  `,
})
export class DashboardComponent implements OnInit {
  // Loading signals
  loadingUser = signal(true);
  loadingStats = signal(true);
  loadingTransactions = signal(true);

  // Data signals
  user = signal<User | null>(null);
  stats = signal<StatCard[] | null>(null);
  transactions = signal<Transaction[] | null>(null);

  // Templates
  userTemplate = { name: 'Loading...', role: 'Loading...', avatar: '' };
  statsTemplate = [/* ... placeholders ... */];
  transactionsTemplate = [/* ... placeholders ... */];

  ngOnInit() {
    // Simulate independent API calls
    setTimeout(() => { 
      this.user.set(realUser); 
      this.loadingUser.set(false); 
    }, 1000);
    
    setTimeout(() => { 
      this.stats.set(realStats); 
      this.loadingStats.set(false); 
    }, 2000);

    setTimeout(() => {
      this.transactions.set(realTransactions);
      this.loadingTransactions.set(false);
    }, 3000);
  }
}

Next Steps