angular-busy2 Live Demo

!Node CI

> Show busy/loading indicators on Signal, Observable, Subscription, Promise, Boolean, Number

$3

Getting Started

Install with npm.

``bash
npm install angular-busy2 --save
`

Standalone import directive

`typescript
import { CgBusyDirective } from 'angular-busy2';

@Component({
imports: [CgBusyDirective]
})
`

Options

The [cgBusy] directive expects any Signal, Observable, Subscription, Promise, Boolean, Number and optional [cgBusyConfig]
configuration object.

In other words. You may do this:

`html


`

or this:

`html


`

* promise - Required. The Signal/promise/Observables (or array of Signal/promises/Observables) that will cause the busy indicator to
show. Also supports boolean and numbers (truthy values will show loading...)
* message - Optional. Defaults to 'Please Wait...'. The message to show in the indicator. This value may be updated
while the promise is active. The indicator will reflect the updated values as they're changed.
* backdrop - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
* templateRef - Optional. If provided, the given template will be shown in place of the default progress indicator
template.
* delay - Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.
* minDuration - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker.
Defaults to 0. Specified in milliseconds.
* wrapperClass - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy
sign/animation. Defaults to undefined. Typically only useful if you wish to apply different positioning to the
animation.

Overriding Defaults options via BUSY_OPTIONS


For every omitted option in the supplied CgBusyOptions the libraries default value will be used.

`typescript
import { BUSY_OPTIONS, CgBusyOptions } from 'angular-busy2';

export const appConfig: ApplicationConfig = {
providers: [
{
provide: BUSY_OPTIONS,
useValue: {
minDuration: 100
} as CgBusyOptions
}
]
};
`

Overriding Defaults via service

The default values for message, backdrop, templateRef, delay, and minDuration may all be overridden by
overriding the CgBusyDefaults, like so:

`typescript
import { CgBusyDefaults } from 'angular-busy2';

class App {
private customTemplateTpl: TemplateRef = viewChild.required('customTemplate');

constructor(private busyDefaults: CgBusyDefaults) {
this.busyDefaults.delay = 5000;
}

ngOnInit() {
this.busyDefaults.templateRef = this.customTemplateTpl();
}
}
`

`html






``

Only the values you'd like overridden need to be specified.

> Fork from original angular-busy (cgBusy) https://github.com/cgross/angular-busy