Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

This Component is a part of CoreUI PRO for Angular, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.

Start Free Trial

Angular Loading Button Component

Angular Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.

## Examples Cancellable on click by default. ### Border (default spinner)

### Grow

### Disabled on loading Non cancellable on click.

--- ## API reference ### LoadingButton Module ```typescript import { LoadingButtonModule } from '@coreui/angular'; @NgModule({ imports: [LoadingButtonModule,] }) export class AppModule() { } ``` ### cLoadingButton _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabledOnLoading` | Makes button disabled when loading. | `boolean` | _false_ | | `loading` | Loading state (set to true to start animation). | `boolean` | _false_ | | `spinnerType` | Type of spinner. | `border` \| `grow` |_border_|

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `loadingChange` | Event emitted on `loading` change. | `boolean` |