# epom-ng2-spinners
Implements spinners on pages. You can use small (local) spinners and big spinner (overlay and block all page).
**All page spinner has placement 'content'**. Any local spinner can has any value of placement.

## Getting Started

This module depends from `epom-ng2-logger`.

### Prerequisites

| Name | Description |
| ---- | ----------- |
| `epom-ng2-logger` | We need this module to log events and flow of this module|

Install `epom-ng2-logger` via npm:

```sh
$ npm install --save epom-ng2-logger
```

### Installing

You need to provide `SpinnersModule` in your App.module

```typescript
import {SpinnersModule} from 'epom-ng2-spinners'

imports: [
    SpinnersModule,
    ...
];
```

## Parts
    .
    |-- epom-ng2-spinners
    |-- |-- spinners.components
    |-- |-- |-- spinner.default.ts
    |-- |-- |-- spinner.image.placeholder.ts
    |-- |-- |-- spinner.init.ts
    |-- |-- |-- spinner.nodata.ts
    |-- |-- |-- spinner.update.ts
    |-- |-- views
    |-- |-- |-- default.html
    |-- |-- |-- image-placeholder.html
    |-- |-- |-- init.html
    |-- |-- |-- nodata.html
    |-- |-- |-- update.html
    |   |-- spinner.abstract.component
    |   |-- spinner.service
    |   |-- spinner.directive
    |   |-- spinner.module

## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **placement** | string | name of current spinner, important for managing! Default value is 'content'|

## Service public methods
| Method Declaration                                                      | Description |
| ----------------------------------------------------------------------- | ----------- |
| .**open**(placement: string): void | opens spinner with current placement. If placement undefined -- open with placement 'content'|
| .**close**(placement: string): void | close spinner with current placement. If placement undefined -- close with placement 'content' |
| .**closeWithTimeout**(placement: string, timeout): void | close spinner with current placement after timeout in ms. If placement undefined -- close with placement 'content' |
| .**isOpened**(placement: string): boolean | returns current state of current spinner |

## To use spinner with definite type you need to write ng-2 component in HTML markup

```html
<epom-spinner-default></epom-spinner-default> <!-- for overlay spinner -->
<epom-spinner-init></epom-spinner-init>       <!-- for init spinner -->
<epom-spinner-update></epom-spinner-update>   <!-- for update spinner -->
<epom-spinner-nodata></epom-spinner-nodata>   <!-- for no data spinner -->
```

Examples:
```javascript
    if (!this.spinners.isOpened('miniLocalSpinner')) {
        this.spinners.open('miniLocalSpinner');
    }
```

## Contributors

Gennady Strelets <g.strelets@itmgmedia.net>
