ng-partial-loader v1.1.1
ng-partial-loader
ng-partial-loader is an Angular library that fills unresolved async content by simple partial loader
Demo available @ https://cagcak.github.io/ng-partial-loader
StackBlitz available @ https://stackblitz.com/edit/ng-partial-loader
Table of contents
Installation
To add ng-partial-loader library to your package.json
use the following command.
npm install ng-partial-loader --save
or
yarn add ng-partial-loader
After installation completed, define NgPartialLoaderModule
to your module scope to use
import { NgModule } from '@angular/core';
import { NgPartialLoaderModule } from 'ng-partial-loader';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [NgPartialLoaderModule],
bootstrap: [AppComponent],
})
export class AppModule {}
then in angular.json
define default loaders asset location to style bundle if it will be used
...
{
...
"architect": {
"build": {
...
"options": {
...
"assets": [
...
{
"glob": "**/*",
"input": "node_modules/ng-partial-loader/src/assets",
"output": "./assets"
}
],
}
...
}
}
Usage
ng-partial-loader
requires a minimal directive definition to make loader available as in needed an alternative content with a boolean value to hide/show options as dynamically.
isHttpRequestResolved: boolean = false;
<div [ngPartialLoader]="isHttpRequestResolved">
<span>This content will be available if isHttpRequestResolved is true</span>
<div id="ng-partial-loader-uuid">
this dynamic loader element added to dom when isHttpRequestResolved is true
</div>
</div>
Options
ng-partial-loader has an NgPartialLoaderOptions
named model
path
: loader graph or vector path with forward slashes, ex: '/resources/images/loaders/'fallback
: fallbak loader file with extension, ex: 'loading.png'customLoader
: application specific loader, ex: 'loader.svg'minHeight
: minimum height for loader scopeloader
: library based loader option, ex: 'blocks' | 'dual-ring' | ... etc
If there is not any option defined, the directive will have default animated cube loader.
Below demonstrates how to pass options
<div
[ngPartialLoader]="isHttpRequestResolved"
[loaderOptions]="{
path: '/assets/my-images/',
customLoader: 'bullets.gif'
}"
>
...
</div>
<div [ngPartialLoader]="isHttpRequestResolved" [loaderOptions]="{ loader: 'ripple' }">...</div>
Contribution
Contributions are always welcome, just make sure that ...
- Your code style matches with the rest of the project
- Unit tests pass
- Linter passes
Support Development
The use of this library is totally free and no donation is required.
License
Licensed under MIT.