Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jinhduong/ng2-loading-indicator
Angular 2/4 loading indicator
https://github.com/jinhduong/ng2-loading-indicator
angular angular2 loading-indicator loading-spinner
Last synced: about 2 months ago
JSON representation
Angular 2/4 loading indicator
- Host: GitHub
- URL: https://github.com/jinhduong/ng2-loading-indicator
- Owner: jinhduong
- License: mit
- Created: 2017-07-13T16:52:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-12T09:24:13.000Z (over 5 years ago)
- Last Synced: 2024-10-31T10:43:24.229Z (about 2 months ago)
- Topics: angular, angular2, loading-indicator, loading-spinner
- Language: TypeScript
- Size: 40 KB
- Stars: 12
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng2-loading-indicator @decorator
![npm-image](https://img.shields.io/npm/v/ng2-loading-indicator.svg)
![downloads-image](https://img.shields.io/npm/dm/ng2-loading-indicator.svg)
![total-downloads-image](https://img.shields.io/npm/dt/ng2-loading-indicator.svg)The simplest library for loading indicator @decorator in Angular 2/4.
- No dependencies
- Simplest![https://media.giphy.com/media/3o7buiqQhDuGYmc2go/giphy.gif](https://media.giphy.com/media/3o7buiqQhDuGYmc2go/giphy.gif)
## 1. Install
`npm install ng2-loading-indicator --save`## 2. Using
### Add into `.component`
```js
import { LoadingIndicator } from 'ng2-loading-indicator';
```### **We have 2 ways to use this decorator in our code:**
### 1. Whole page loading
#### 1.1 When return a `Subscription` after call `.subscribe`
```js
@LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).subscribe(x => {
console.log('finished 3s');
});
}
```- Other cases in `http`,`forms`,... anything in Angular are using `rxjs`
```js
@LoadingIndicator()
getDataFromApi() {
return this.http.get('your-api.com')
.map(res => res.json())
.subscribe(res => {});
}
```#### 1.2 In async/await function
```js
@LoadingIndicator()
async tryLoadingIndicator() {
await Observable.timer(3000).toPromise();
}
```#### 1.3 When return a `Observable` after call from operators `do`, `map`,...
```js
@LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).do(x => {
console.log('finished 3s');
});
}
```### 2. Parts of the page loading
```js
// 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();
}
```