# @angular-cool/loading-button

> Cool button with loading indicator for angular

Latest version **18.0.2** (published 2026-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @angular-cool/loading-button
pnpm add @angular-cool/loading-button
yarn add @angular-cool/loading-button
bun add @angular-cool/loading-button
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 18.0.2 |
| Published | 2026-07-05 |
| First published | 2020-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Hacklone |
| Maintainers | hacklone |
| Keywords | angular2, angular, ngx, loading, button, progress |

## Links

- npm: https://www.npmjs.com/package/@angular-cool/loading-button
- Repository: https://github.com/Hacklone/angular-cool
- Homepage: https://github.com/Hacklone/angular-cool/blob/master/projects/loading-button/README.md
- Issues: https://github.com/Hacklone/angular-cool/issues
- npm.io page: https://npm.io/package/@angular-cool/loading-button

## Dependencies (1)

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

## Recent versions

- 18.0.2 (latest) — 2026-07-05
- 18.0.1 — 2024-06-11
- 18.0.0 — 2024-06-11
- 15.0.0 — 2022-11-22
- 13.0.0 — 2022-01-07
- 11.3.0 — 2021-09-25
- 11.2.0 — 2021-09-25
- 11.1.0 — 2021-09-21
- 11.0.0 — 2020-11-16
- 10.0.0 — 2020-09-01
- 2.0.0 — 2020-07-15

## README

[npm-url]: https://npmjs.org/package/@angular-cool/loading-button
[npm-image]: https://img.shields.io/npm/v/@angular-cool/loading-button.svg
[downloads-image]: https://img.shields.io/npm/dm/@angular-cool/loading-button.svg
[total-downloads-image]: https://img.shields.io/npm/dt/@angular-cool/loading-button.svg

# @angular-cool/loading-button [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]  [![Total Downloads][total-downloads-image]][npm-url]
Cool button with loading indicator for angular

## Install 
> npm install --save @angular-cool/loading-button

## Usage

```typescript
import { CoolLoadingButton } from '@angular-cool/loading-button';

@Component({
  imports: [CoolLoadingButton],
  standalone: true,
})
export class MyComponent {
  public async myAsyncFunction(parameters: any): Promise<any> {
    // Do something async
  }
}
```

```html
<cool-loading-button [clickHandler]="myAsyncFunction.bind(this)"
                     [clickParameters]="{ parametersPassToTheFunction: 'test' }">
  Click me
</cool-loading-button>
```

## API
### Inputs
* \[clickHandler]
    - Type: (parameters: any) => Promise<any> | any 
    - Async function to run when the button is clicked
    - Note: Don't forget the ```.bind(this)``` part when binding this parameter

* \[clickParameters]
    - Type: any 
    - Parameter to be passed when invoking the clickHandler function

* \[color]
    - Type: ThemePalette 
    - Color of the Material Button

* \[spinnerColor]
    - Type: ThemePalette 
    - Color of the MatSpinner in the button
  
* \[disabled]
    - Type: boolean 
    - Whether the button is disabled
 

### Outputs
* \(loadingChanged)
    - Type: boolean
    - Called when the loading state has changed
    
* \(loadingFinished)
    - Type: void
    - Called when the loading has finished / stopped

## License
> The MIT License (MIT)

> Copyright (c) 2020 Hacklone
> https://github.com/Hacklone

> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to deal
> in the Software without restriction, including without limitation the rights
> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the Software is
> furnished to do so, subject to the following conditions:

> The above copyright notice and this permission notice shall be included in all
> copies or substantial portions of the Software.

> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.

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