ng-dynamic-skeleton

ng-dynamic-skeleton

ng-dynamic-skeleton is an Angular library that provides customizable skeleton loaders for various UI components such as tables, lists, and vertical bar charts. It helps you improve the user experience by showing loading placeholders while the actual content is being fetched.

Features

• Skeleton loaders for tables, lists, and vertical bar charts.
• Easy to integrate and use with Angular components.
• Customizable number of rows, columns, and items.

Installation

To install ng-dynamic-skeleton in your Angular project, run:

npm install ng-dynamic-skeleton

Usage

Import the Module

In your AppModule, import the NgDynamicSkeletonModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgDynamicSkeletonModule } from 'ng-dynamic-skeleton';


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgDynamicSkeletonModule  // Import the skeleton module here
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use the Skeleton Loader Directive

Once the module is imported, you can use the libSkeletonLoader directive in your templates. Here's an example of how to use it for different types of skeleton loaders:

Table Skeleton Loader

<table libSkeletonLoader [skeletonLoader]="true" skeletonType="table" [rows]="5" [columns]="3"></table>

List Skeleton Loader

<div libSkeletonLoader [skeletonLoader]="true" skeletonType="list" [items]="5"></div>

Vertical Bar Chart Skeleton Loader

<div libSkeletonLoader [skeletonLoader]="true" skeletonType="vertical-bar-chart"></div>

API

Inputs

• skeletonLoader: (boolean) - Enable or disable the skeleton loader. Set to true to show the skeleton, false to hide it.
• skeletonType: (string) - The type of skeleton loader to display. Available options:
  • 'table'
  • 'list'
  • 'vertical-bar-chart'
  • 'form'
• rows: (number) - The number of rows for the table skeleton (only applicable for table type).
• columns: (number) - The number of columns for the table skeleton (only applicable for table type).
• items: (number) - The number of items for the list skeleton (only applicable for list type).

Examples

Table Skeleton Example

<table libSkeletonLoader [skeletonLoader]="true" skeletonType="table" [rows]="5" [columns]="4"></table>

List Skeleton Example

<div libSkeletonLoader [skeletonLoader]="true" skeletonType="list" [items]="3"></div>

Vertical Bar Chart Skeleton Example

<div libSkeletonLoader [skeletonLoader]="true" skeletonType="vertical-bar-chart"></div>

License

This project is licensed under the MIT License - see the LICENSE file for details.