ngx-skeleton
Demo
Live demo here.
Installation
Install ngx-skeleton via NPM, using the command below.
npm install @hugodcrq/ngx-skeleton
Import NgxSkeletonModule
in your app.module
.
import { NgxSkeletonModule } from "@hugodcrq/ngx-skeleton";
@NgModule({
imports: [NgxSkeletonModule],
})
class AppModule {}
Import library styles to your global styles.scss
file
@use "node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.scss";
or if you use CSS add this to your styles inside your angular.json
:
{
// projects.[your_project].architect.build.options
"styles": ["node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.css"]
}
Basic Usage
In .ts
component
import { Component, inject, OnInit } from "@angular/core";
import { NgxSkeletonService } from "@hugodcrq/ngx-skeleton";
@Component({})
export class AppComponent implements OnInit {
skeleton = inject(NgxSkeletonService); // You can also inject via the constructor
constructor() {}
ngOnInit() {
this.skeleton.show();
// simulate long task (3s) and hide
setTimeout(() => {
this.skeleton.hide();
}, 3000);
}
}
In .html
use hdSkeleton
directive
<!-- with <div></div> wrapper for element without children -->
<div hdSkeleton>
<h1>Title exemple</h1>
</div>
<!-- directly on parent if element has children or add <div></div> wrapper -->
<div class="card" hdSkeleton>
<div class="card-header">Github logo</div>
<div class="card-body">
<img src="https://www.vectorlogo.zone/logos/github/github-ar21.svg" alt="github" />
</div>
</div>
Development
To respect the standard of Conventional Commits, things have been put in place, for more information see the git section below.
Currently runs with:
- angular - Building mobile and desktop web applications
- semantic-release - Fully automated version management and package publishing
- commitlint - Checks if your commit messages meet the conventional commit format
- commitizen - Simple commit conventions from terminal prompt
- cz-git - Adapter for commitizen to custom easy configuration
Git
Commit message
By default
git-commit
is disable with apre-commit
hook to force usage ofnpm run commit
Use npm script
This command allow to create formatted commit message from prompt with commitizen & cz-git.
npm run commit
Use git
You can disable pre-commit
hook with --no-verify
flag. But respect these rules below
git commit --no-verify
-
Format
- A commit message consists of a header, body and footer.
- The header has a type and a subject:
<type>[(<scope>)]: <emoji> <subject>
[BLANK LINE]
[body]
[BLANK LINE]
[breaking changes]
[BLANK LINE]
[footer]
-
Type
✨ feat
— A new feature🐛 fix
— A bug fix📝 docs
— Documentation only changes💄 style
— Markup, white-space, formatting, missing semi-colons... not affect the meaning of the code♻ refactor
— A code change that neither fixes a bug or adds a feature⚡ perf
— A code change that improves performance✅ test
— Adding missing tests📦️ build
— Changes that affect the build system or external dependencies🎡 ci
— CI related changes🔨 chore
— Other changes that don't modify src or test files⏪️ revert
— Reverts a previous commit