@chevtek/angular-spinners

A library for easily managing loading spinners in complex Angular2+ applications.

NOTICE

@chevtek/angular-spinners v5 or higher is now for Angular 2 or higher. If you are looking to install the old version for AngularJS 1.x you may run npm install angular-spinners@3.1.2. Note the lack of @chevtek/ in front of the package name. The older versions of this package were not published under the Chevtek scope. That version is considered deprecated and is no longer supported unless I find a major issue, but feel free to continue using it as it has proven to be quite reliable in AngularJS 1.x. You will never see changes to the old version of angular-spinners except in the case of potential patch versions (3.1.x) if anything major gets reported for the old version.

Install

$ npm i @chevtek/angular-spinners --save

If you're running npm v8 or higher then --save is implied if you don't include it.

Quick Start

import { SpinnerModule } from '@chevtek/angular-spinners';

@NgModule({
  imports: [
    BrowserModule,
    SpinnerModule,
    ...
  ]
  ...
})
export class AppModule { }

Next simply drop a spinner directive in your app. The only required attribute is name.

<spinner name="mySpinner"></spinner>

Now just inject the SpinnerService wherever you need it.

import { SpinnerService } from '@chevtek/angular-spinners';

@Injectable()
export class YourService {

  public constructor(protected spinnerService: SpinnerService) {}

  beginSomeOperation(): void {
    this.spinnerService.show('mySpinner');
    this.doSomething().then(() => {
      this.spinnerService.hide('mySpinner');
    });
  }
}

Here is a working demo.

---

Spinner Component

The spinner component gives you several options.

name: string

The name attribute is required. It is what you must pass to the service when trying to show/hide that specific spinner.

<spinner name="mySpinner"></spinner>

group: string

Optionally a group name may be specified so that you can show/hide groups of spinners.

<spinner name="mySpinner" group="foo"></spinner>
<spinner name="mySpinner2" group="foo"></spinner>
<spinner name="mySpinner3" group="bar"></spinner>

@Injectable()
export class