Setup

Step 1 - Import the SkeletonScreenModule

Add the SkeletonScreenModule to your application module so that the skeleton directives will be accessible.

...
import { SkeletonScreenModule } from '@daysmart/angular-skeleton-screen';
...

@NgModule({
  declarations: [
    SomeComponent
  ],
  imports: [
    ...
    SkeletonScreenModule,
    ...
  ],
  providers: []
})
export class SomeModule {}

Step 2 - Add the skeleton screen's style sheet to your global stylesheet list

Add the skeleton-screen.scss file to the list of your global stylesheets in your angular.json file.

{
    "projects": {
        "some-angular-proj": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "node_modules/@daysmart/angular-skeleton-screen/styles/skeleton-screen.scss"
                        ]
                    }
                }
            }
        }
    }
}

Usage

Directives

skeletonScreen

Apply this to the top most container of the skeleton screen you'll be configuring. Any inputs set on it are propagated down to it's child skeleton directives and act as defaults. This acts as a wrapper for the skeletonData and skeletonTable directives and is not actually required in order to use these. It just makes life a lot easier on a larger skeleton screen.

skeletonData

Apply this to any element you want to have replaced with a piece of the skeleton screen. It will get it's defaults from the parent skeletonScreen directive but can be set up independently of one. You can override the defaults by setting the same inputs on the skeletonData element itself.

skeletonTable

Apply this to any element you want to have replaced with a piece of the skeleton screen. It will get it's defaults from the parent skeletonScreen directive but can be set up independently of one. You can override the defaults by setting the same inputs on the skeletonTable element itself.

Supported Inputs

1. showSkeleton - When set to a non-falsy value, the skeleton will be shown. This is supported by all directives and can be overridden by all child directives.
2. placeholderHeight - Can be set to a number or string or left unset. When set to a number it unit defaults to px. A unit can be provided when a string is used. When left blank, the directive will try its best to infer the height of the original element and use that. This is supported by all directives and can be overridden by all child directives.
3. placeholderWidth - Can be set to a number or string or left unset. When set to a number it unit defaults to px. A unit can be provided when a string is used. When left blank, the directive will try its best to infer the width of the original element and use that. This is only supported by the skeletonScreen and skeletonData directives.
4. skeletonTableRowAmount - Takes in a number that represents the amount of skeleton rows to show within the skeleton table. This is only supported by the skeletonScreen and skeletonTable directives.

Other Notes

• These directives can be applied to material components as well.
• The skeletonData directive cannot be applied directly to self-enclosed elements (img, input, etc). If you need to apply the directive to an element like this, it must be applied to a wrapper element such as a div or span.

Example

Sample Template

<div
    class="info-container"
    skeletonScreen
    [showSkeleton]="isLoading"
    placeholderWidth="50%"
>
    <!-- The skeletonScreen's placeholderWidth is being overridden-->
    <span skeletonData placeholderWidth="5rem" placeholderHeight="5rem">
        <!-- The skeletonData directive does not support being applied directly to an img element -->
        <img [src]="profile.imgSrc" />
    </span>

    <!--No placeholder height, so the directive attempts to infer the correct size-->
    <!-- All the defaults set by the skeleton are being used -->
    <div class="field-container" skeletonData>
        Name:
        <span name="name">{{ profile.name }}</span>
    </div>

    <!-- The skeletonScreen's showSkeleton is being overridden-->
    <table
        skeletonTable
        [skeletonTableRowAmount]="5"
        [showSkeleton]="tableIsLoading"
    >
        ...
    </table>
</div>

Sample Component

@Component({
    ...
})
export class SomeComponent implements OnInit {
    isLoading: boolean;
    profile: SomeProfile;

    constructor(
        private httpClient: SomeHttpClient
    )

    ngOnInit() {
        this.httpClient.getProfile(...)
            .pipe(
                map(profile => {
                    this.isLoading = false;
                    this.profile = profile;
                })
            );
    }

    ...
}