# angular-button-loader

> Angular directive to display loading spinner on button and disable the button while performing async calls. It supports Angular 4+.

Latest version **1.1.5** (published 2019-07-01) · 0 weekly downloads

## Install

```sh
npm install angular-button-loader
pnpm add angular-button-loader
yarn add angular-button-loader
bun add angular-button-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2019-07-01 |
| First published | 2019-03-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 64.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aditi17 |
| Keywords | button loader, button spinner, loader, spinner, angular button loader, angular button spinner |

## Links

- npm: https://www.npmjs.com/package/angular-button-loader
- npm.io page: https://npm.io/package/angular-button-loader

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.1.5 (latest) — 2019-07-01
- 1.1.4 — 2019-06-30
- 1.1.3 — 2019-06-30
- 1.1.2 — 2019-06-30
- 1.1.1 — 2019-06-30
- 1.1.0 — 2019-06-30
- 1.0.10 — 2019-04-01
- 1.0.9 — 2019-03-08
- 1.0.8 — 2019-03-08

## README

Angular directive to display loading spinner on button and disable the button while performing async calls. It supports Angular 4+.

#Installation
`npm i angular-button-loader`

#Description

* You can override the css for your customized spinner.

* Supports Angular 4+.

#Usage

> Import module at your root level module

`import { AngularButtonLoaderModule } from 'angular-button-loader';`

> Make an import entry

`imports: [ AngularButtonLoaderModule.forRoot() ]`

> Make entry of css file in angular.json or angular-cli.json according to version of angular

```
"styles": [            
  "node_modules/angular-button-loader/style/button-loader.min.css"
]
```

> Apply directive on your button and place `<span>` tag inside button

```
<button type="submit" buttonLoader>
  <span></span>
  Sign In
</button>
```

> You can also supply loader color. It's optional if you do not supply loader will be shown in default color.

```
<button type="submit" buttonLoader [loaderColor]="'white'">
  <span></span>
  Sign In
</button>
```

> Import `AngularButtonLoaderService` to the component where you want to show the spinner.

`import { AngularButtonLoaderService } from 'angular-button-loader';`

> Inject dependancy

`constructor(private buttonLoaderService: AngularButtonLoaderService) {}`

> Use `displayLoader()` method to display the loading spinner.

`this.buttonLoaderService.displayLoader();`

> Use `hideLoader()` method to hide the loading spinner once the processing is done.

`this.buttonLoaderService.hideLoader();`

#Example

```
this.buttonLoaderService.displayLoader();
this.http.get(GLOBAL['CONFIG_URL'])
  .subscribe(data => {
    this.buttonLoaderService.hideLoader();
  });
```

---
_Source: https://npm.io/package/angular-button-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._