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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-12T09:24:13.000Z (over 5 years ago)
• Last Synced: 2024-07-11T21:27:52.790Z (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();

}

```