Add spinner in Angular application with ngx-spinner

NgxSpinner is a library with more than 50 different loading spinners.
It supports Angular 13 but is available and for older versions.

Usually we want to use spinners to show that something happens and inform the user that our application is working.

I use spinners when an API call is in progress.
In this article, I am going to show a simple example of how to use spinners and I ll make use of setTimeout function.
Of course you can add the spinner in a service or in your interceptor.

Installation

In order to use it you must to install it.
ngx-spinner is available via npm or yarn

Open a console in your working directory
If you prefer npm type the following

$ npm install ngx-spinner --save

if you prefer yarn type

$ yarn add ngx-spinner

There is also an option to add the spinner using angular-cli

$ ng add ngx-spinner

Imports

The first thing we need to do is to add css animation files in angular.json

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-beat.css" 
  ]
}

After doing that we need to import BroswerAnimationModule and the NgxSpinnerModule in the root module. Usually this will be the AppModule.

So in our app.module.ts we need to add the following

import { NgxSpinnerModule } from 'ngx-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Also we need to import CUSTOM_ELEMENT_SCHEMA from @angular/core otherwise you will see an error in the console.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

and then below the imports array we need to add schemas array and pass CUSTOM_ELEMENT_SCHEMA there.

Now our app.module.ts it looks like below

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxSpinnerModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use

One last thing we need to import is the ngx-spinner service in order to use the functions that the service provides to us.
Inject the service via constructor and use it on ngOnInit.
So our app.component.ts will looks like below

import { NgxSpinnerService } from 'ngx-spinner';

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}

  ngOnInit() {
    this.spinner.show();
    setTimeout(() => {
      this.spinner.hide();
    }, 5000);
  }
}

I use setTimeout in order to show how we can close the spinner.
In this case the spinner will close after 5 seconds.

Now that we setup everything we can use the spinner in our template like this

<ngx-spinner type="ball-beat"></ngx-spinner>

Thanks for reading and I am waiting for your comments.