ngx-skeleton-loader

By default, settings in NgxSkeletonLoaderModule.forRoot({ theme: { ... } }) override local [theme] inputs on the component. To allow local themes to merge with and extend the global theme, set extendsFromRoot: true in the global configuration. When enabled, local CSS attributes will override global ones, but other global attributes will be preserved.

// Global configuration in NgModule
NgxSkeletonLoaderModule.forRoot({
  theme: {
    extendsFromRoot: true,
    height: '30px',
  },
})

<!-- Uses height: 30px from root and background: blue from local -->
<ngx-skeleton-loader [theme="{background: 'blue'}" />

<!-- Uses height: 50px from local and background: red from local -->
<ngx-skeleton-loader [theme="{height: '50px', background: 'red'}" />

Install the ngx-skeleton-loader module as a project dependency using npm.

npm install ngx-skeleton-loader --save

To run the project locally for development or testing:

• Run Demo: Use npm start to launch the Angular application. The demo will be available at http://localhost:4200.
• Run Tests: Use npm test to execute the test suite. For continuous testing (watch mode), use npm run tdd.

For applications using NgModule, import NgxSkeletonLoaderModule into your application module's imports array.

...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

For Angular applications using standalone components, add provideNgxSkeletonLoader to your app.config.ts providers. You can optionally pass a global configuration object to define a default theme.

// app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgxSkeletonLoader({
      theme: {
        extendsFromRoot: true,
        height: '30px',
      },
    }),
  ]
};

You can apply styles via your component's CSS file using the :host selector and the deep combinator (>>>) to target the internal .skeleton-loader class.

⚠️ Warning: This approach is not encouraged because:

1. It relies on :host DOM style scoping.
2. It targets internal classes (.skeleton-loader), meaning any changes to the library's internal class names will break your application.

/* In your component's CSS file */
:host >>> ngx-skeleton-loader .skeleton-loader {
  border-radius: 5px;
  height: 50px;
  background-color: #992929;
  border: 1px solid white;
}

You can use ngx-skeleton-loader within the @placeholder block of Angular's @defer syntax to show a skeleton while the deferred content is being loaded.

<div class="item">
  @defer {
    <my-item-view />
  } @placeholder (minimum 1000ms) {
    <ngx-skeleton-loader />
  }
</div>

Use NgxSkeletonLoaderModule.forRoot() in your NgModule imports to set global default values for all <ngx-skeleton-loader> components in your application. This includes settings for animation, loadingText, and theme.

...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [YourAppComponent],
  imports: [
    NgxSkeletonLoaderModule.forRoot({
      animation: 'pulse',
      loadingText: 'This item is actually loading...'
    }),
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})
export class YourAppComponent {}

You can define custom styles for the skeleton loader by passing an object to the [theme] attribute. This attribute supports standard CSS property names (kebab-case) and also supports Angular-style style object syntax (e.g., height.px for pixel values).

Note: If you need to change the background color of the entire wrapper, you must apply those styles to the ngx-skeleton-loader component wrapper itself.

<!-- Using kebab-case CSS properties -->
<ngx-skeleton-loader
  count="5"
  [theme]="{ 
    'border-radius': '5px',
    'height': '50px',
    'background-color': '#992929',
    'border': '1px solid white'
  }"
/>

<!-- Using Angular-style style object syntax -->
<ngx-skeleton-loader
  count="5"
  [theme]="{ 
    'height.px': 50,
    'background-color': '#992929'
  }"
/>

When using appearance="square", you can control the dimensions using these inputs:

• size: A number representing both width and height. Defaults to 40.
• measureUnit: The CSS unit for size. Defaults to px. Valid options: px, em, rem, %, vh, vw.

<ngx-skeleton-loader appearance="square" size="100" measureUnit="px" />