0.1.0 • Published 2 years ago
ngx-load v0.1.0
Add easily an overlay loader over any kind of component. Fully customizable with your own components.
Compatibility with Angular Versions
Features
- 🔥 Works with Angular & HTML elements
- ⏳ Easy to install
- 🛠 Customizable
- ☕ Easy to use
Prerequisite
If not already done you should setup Angular CDK as mention here.
Install the dependency with
npm i @angular/cdk
Then add the following snippet in your global style.scss
@import '@angular/cdk/overlay-prebuilt.css';
Installation
Install it through npm with :
npm i ngx-load
Configuration
Using default loader
import { NgxLoadModule } from "ngx-load";
@NgModule({
imports: [NgxLoadModule]
})
class AppModule {}
Using custom loader
import { NgxLoadModule } from "ngx-load";
@NgModule({
imports: [
NgxLoadModule.with({
loaderComponent: YourLoaderComponent
})
]
})
class AppModule {}
Usage
LoaderService
@Component({
selector: 'example',
template: `
<div class="element"> {{ content | async }} </div>
`,
styles: [
`
.element {
width: 100px;
height: 100px;
}
`
]
})
export class ExampleComponent {
content = timer(1000)
.pipe(map(() => "Hello World"))
.pipe(this.loaderService.attachLoader())
constructor(public loaderService: LoaderService) {
}
}
OverlayLoaderDirective
@Component({
selector: 'example',
template: `
<div [loadOverlayLoader]="content" class="element"> {{ content | async }} </div>
`,
styles: [
`
.element {
width: 100px;
height: 100px;
}
`
]
})
export class ExampleComponent {
content = timer(1000).pipe(map(() => "Hello World"))
}
ReplacementLoaderDirective
TODO: make example
Credits
- Readme inspired from @ngneat/hot-toast
- @etiennecrb for the ElementRuler taken from this thread
- loading.io for the default loader