Table of Contents:

• NgxGhosts
  • Installation
  • Components
    • Ghost Box Directive
    • Ghost Image
    • Ghost Text Directive
    • Ghost Text Block Directive
    • Ghost
  • Customization
    • Custom Configuration
    • Custom theme

Live Demo

First you need to install the npm module:

npm install ngx-ghosts or yarn install ngx-ghosts

Import the NgxGhostsModule in modules where you want to use ghosts like this:

@NgModule({
    exports: [
        CommonModule,
        NgxGhostsModule
    ]
})
export class AppModule { }

Load the ngx-ghosts theme by adding it to the angular.json like this:

...
"build": {
  "options": {
    "styles": [
        "./node_modules/ngx-ghosts/theme.scss",
        "projects/ngx-ghosts-app/src/styles.scss"
      ]
  }
}

Or by importing the theme into your global styles like this:

@import '../../../node_modules/ngx-ghosts/theme.scss';

Now you are ready to add the first ghosts to your application.

You can add a ghost to any element with the GhostBox directive. If height and width are not defined the ghost with fill the surrounding element.

<div class="panel">
  <ng-container *ghostBox="loading">
    <div>some content</div>
  </ng-container>
</div>

Parameters:

You can add a ghost to your imagesWith GhostImageWrapper component. To leverage image loading capabilities of ngx-ghosts you have to wrap your image element with GhostImageWrapper component, add GhostImage directive to the image element and define a ghost with GhostImageLoader directive. The image will be loaded as soon as the element enters the visible screen.

<ghost-image-wrapper>
  <img ghostImage [src]="..." [srcset]="..." />
  <ghost ghostImageLoader [height]="256" [width]="256"></ghost>
</ghost-image-wrapper>

You can add a ghost to a single line of text, or parts of a text line with the GhostText directive. In the example below the "title" requested from a server and a server is shown while the request is pending.

<div class="title-text">
  <span *ghostText="loading; length: 23">{{title}}</span>
</div>

Parameters:

You can add a ghost to a multiline text with the GhostTextBlock directive.

<div class="description-text">
  <span *ghostTextBlock="loading; lines: [34, 50]">{{description}}</span>
</div>

Parameters:

For special use cases where the other directives and components don't work you can us the basic Ghost component.

<ghost>My special content</ghost>

Parameters:

One way to customize ngx-ghosts is by providing a custom configuration like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxGhostsModule } from 'ngx-ghosts';


@NgModule({
    imports: [
        BrowserModule,
        NgxGhostsModule.forRoot({
          animationStrategy: 'EqualStartAndEnd'
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

The configuration supports following properties:

There are a whole range of variables that are used to style the ghosts, any variable can be overwritten by providing a custom theme. The Following properties are supported for the theme:

A custom theme can be created like this:

@import '../../../node_modules/ngx-ghosts/theme.scss';

.dark-theme {
  @include ngx-ghosts-theme(
    (
      ghost-base-color: #000,
      ghost-glow-color: #313639
    )
  );
}