The simplest library for loading indicator @decorator in Angular 2/4.
- No dependencies
- Simplest
npm install ng2-loading-indicator --save
import { LoadingIndicator } from 'ng2-loading-indicator';
@LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).subscribe(x => {
console.log('finished 3s');
});
}
- Other cases in
http
,forms
,... anything in Angular are usingrxjs
@LoadingIndicator()
getDataFromApi() {
return this.http.get('your-api.com')
.map(res => res.json())
.subscribe(res => {});
}
@LoadingIndicator()
async tryLoadingIndicator() {
await Observable.timer(3000).toPromise();
}
@LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).do(x => {
console.log('finished 3s');
});
}
// Define a variable with HTMLElement
$div: Element;
// Using ElementRef to get DOM element for this component
constructor(private elementRef: ElementRef) {}
// Set value for above variable (HTMLElement)
ngOnInit() {
this.$div = this.elementRef.nativeElement.querySelector('div');
}
// Add the variable string list to @decorator
@LoadingIndicator(['$div'])
async trySectionLoading() {
await Observable.timer(3000).toPromise();
}