Setup

Step 1 - Import the SkeletonScreenModule

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

``typescript
...
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.

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

Usage

Directives

$3

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.

$3

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.

$3

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.
1. 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.
1. 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.
1. 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

$3

`html

class="info-container"
skeletonScreen
[showSkeleton]="isLoading"
placeholderWidth="50%"
>

Name:
{{ profile.name }}

skeletonTable
[skeletonTableRowAmount]="5"
[showSkeleton]="tableIsLoading"
>
...

`

$3

`typescript
@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;
})
);
}

...
}
``