ngx-smart-skeleton

Skeleton UI library

Smart Skeleton of Angular is dedicated to provide a good development experience for programmers. Before delving into Smart Skeleton in Angular, a good knowledge of Angular and JavaScript ES2015 is needed.

Documentation

Version

Angular 8 => https://www.npmjs.com/package/ngx-smart-skeleton/v/1.0.6

Angular 10 => https://www.npmjs.com/package/ngx-smart-skeleton/v/2.0.0

Angular 11 => https://www.npmjs.com/package/ngx-smart-skeleton/v/3.0.0

Angular 12 => https://www.npmjs.com/package/ngx-smart-skeleton/v/4.0.0

https://ngxsmartskeleton.web.app/

Installation

We strongly recommend to develop Angular with @angular/cli, you can install it with the following commands. Read the documentation of Angular to explore more features. $ npm install -g @angular/cli

Create a New Project

A new project can be created using Angular CLI tools. $ ng new PROJECT-NAME

@angular/cli will run npm install after a project is created. If it fails, you can run npm install by yourself.

Development & Debugging

Run your project now, you can see the img below now. $ ng serve --port 0 --open

Building & Deployment

$ ng build --prod Entry files will be built and generated in dist directory, where we can deploy it to different environments.

Install ngx-smart-skeleton

$ npm install ngx-smart-skeleton --save

Import Styles

Assets

This configuration will include all the assets of the component library. In angular.json add the assets of ngx-smart-skeleton

              "assets": [
              "src/favicon.ico",
              "src/assets",
              {
               "glob": "**/*",
               "input": "./node_modules/ngx-smart-skeleton/assets/",
               "output": "/assets/"
              }
            ],

Import Component Module

Finally, you need to import the component modules you want to use into your app.module.ts file and feature modules. Take the following Button Module module as an example, first introduce the component module:

import { NgxSmartSkeletonModule } from 'ngx-smart-skeleton';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxSmartSkeletonModule
  ]
})
export class AppModule { }

Then use in the template: <skc-skeleton [skc-loading]="loading" [skc-type]="'line'"> </skc-skeleton>