Loading Spinner Notes

Documentation still in progress.

Angular CLI component with service.

Setup

You need to add the service and module references to the app.module file

import { SpinnerService } from '@tifbs/loading-spinner-component/service/spinner.service';

import { SpinnerComponent } from '@tifbs/loading-spinner-component/spinner.component';

declarations: [ ... SpinnerComponent ],

providers: [ ... SpinnerService ],

ng lint

Because this is a Angular Component; 'ng lint' will try to evaluate it, and will pick up that the prefix to the selector does not match your own project's.

To remove this from the linting; open your '.angular-cli.json' file, and find the 'lint' section.

Add:

"exclude": "**/node_modules/**/*"

To the first entry in the list:

"lint": [

{

"project": "src/tsconfig.app.json",

"exclude": "**/node_modules/**/*"

},

...

Use

The spinner uses a service so that it can be called for anywhere in the application without repitition of elements.

Directive

The directive should be placed in the app.component.html file, so that it is present for all other components.

<tifbs-loading-spinner></tifbs-loading-spinner>

When the app starts loading

To start the spinner as soon as the app starts loading; add the following extract to the 'src/index.html' file, in between the '<[prefix]-root>' tags:

<div class="spinner-non"></div>

and include the CSS file in your root styles file:

@import "../node_modules/@tifbs/loading-spinner-component/spinner.component.css"

This will then be replaced with the application content once it loads.

The Service

You use the SpinnerService to show and hide the spinner.

Inject the service in to whichever component will use it, and then use the 'showSpinner()' and 'hideSpinner()' function to show or hide the spinner.

You can use 'showOverlay([boolean] show)' to set whether the overlay element should be shown when the spinner is.

Spinner when calling services

To display to spinner whilst you are waiting for a reply from a service; use '.showSpinner()' before you make the call, and add '.hideSpinner()' once you receive the response.

Make sure that you add the '.hideSpinner()' to both the success, and error, response functions:

this.loadingSpinner.showSpinner();

this.myService.getData(x)

.subscribe(data => this.data = data,

(error) => { this.errorMessage = <any>error; this.loadingSpinner.hideSpinner(); },

() => { this.loadingSpinner.hideSpinner(); });

}

.