Angular Skeleton Loader #

Angular Skeleton Loader

We all love the Angular Material Design System. Its fast, easy to set up and consists of all the components that one needs. Angular Skeleton Loader consists of skeleton loaders for commonly used Angular Material components.

Table of Content

* Angular Skeleton Loader
* Installation
* Basic Components
* 1. Rectangle
* Props
* 2. Square
* Props
* 2. Circle
* Props
* 4. Chip
* Props
* Pre-made Components:
* 1. Line
* Props
* 2. Input
* Props
* 3. Card
* Props
* 4. Table
* Props
* Note

Installation ##

Type the following command to install the package:

``shell
npm install angular-skeleton-loader
`

Basic Components

$3

Import the AngularRectangleSkeletonModule into your component module like

`typescript
import {AngularRectangleSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularRectangleSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-----------|---------|-----------|----------------------------------------------------------------|
| animate | boolean | true | true, false |
| width | string | "100px" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| height | string | "2em" | "200px", "2em", "100%", "fit-content", "auto", "0" |

$3

Import the AngularSquareSkeletonModule into your component module like

`typescript
import {AngularSquareSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularSquareSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-----------|---------|----------|----------------------------------------------------------------|
| animate | boolean | true | true, false |
| size | string | "80px" | "200px", "2em", "100%", "fit-content", "auto", "0" |

$3

Import the AngularCircleSkeletonModule into your component module like

`typescript
import {AngularCircleSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularCircleSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-----------|---------|----------|----------------------------------------------------------------|
| animate | boolean | true | true, false |
| radius | string | "80px" | "200px", "2em", "100%", "fit-content", "auto", "0" |

$3

Import the AngularChipSkeletonModule into your component module like

`typescript
import {AngularChipSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularChipSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html
[animate]='true' width='200px' height='1.5em' [chips]='5' [randomWidth]='false'
>
`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-------------|---------|-----------|----------------------------------------------------------------|
| animate | boolean | true | true, false |
| width | string | "100px" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| height | string | "2em" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| chips | number | 1 | 0 to Inf |
| randomWidth | boolean | false | true, false |

If randomWidth prop is true creates chip/s of random sizes ranging from 150px to 100px;




Pre-made Components:

Here is a list of pre-made component if you would like to use them in your application

$3

Import the AngularLineSkeletonModule into your component module like

`typescript
import {AngularLineSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularLineSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-------------|---------|----------|----------------------------------------------------------------|
| animate | boolean | true | true, false |
| width | string | "100%" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| height | string | "1em" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| lines | number | 2 | 0 to Inf |

$3

Import the AngularInputSkeletonModule into your component module like

`typescript
import {AngularInputSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularInputSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-----------------|---------|---------|-----------------|
| animate | boolean | true | true, false |
| withPlaceholder | boolean | true | true, false |

$3

Import the AngularCardSkeletonModule into your component module like

`typescript
import {AngularCardSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularCardSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-----------------|---------|---------|-----------------|
| animate | boolean | true | true, false |

$3

Import the AngularTableSkeletonModule into your component module like

`typescript
import {AngularTableSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
imports: [
AngularTableSkeletonModule,
]
})
`

Update your HTML code to use the component that you like

`html

`

#### Props:

| Parameter | Type | Default | Accepted Values |
|-------------------------|----------|---------------------------------------|-------------------------------------------------------------------------------------------------|
| animate | boolean | true | true, false |
| width | string | "100%" | "200px", "2em", "100%", "fit-content", "auto", "0" |
| rows | number | 5 | 0 to Inf |
| columns | number | 4 | 0 to Inf |
| columnWidthDistribution | string[] | ['35%', '10%', '10%', '15%', '15%'] | "200px", "2em", "100%", "fit-content", "auto", "0"` in an array (Ideally percentage) |

Note:

This package is still a work in progress. An extensive list of components that include most if not all the components of Angular Material Design System.

Any suggestions, or component requests will be highly appreciated. Thank you!