Adding loading spinner in Angular application

In this post , we will learn about how we can show loader in Angular application using Ngx spinner library

Ngx-spinner is an angular library for loading spinner which supports Angular4+.

Follow below steps:

Step1:

Install ngx-spinner library using below command.

npm install ngx-spinner --save

Step2:

Update app.module.ts by importing NgxSpinnerModule as below.

Step3:

Now inject NgxSpinnerService in what ever you want to use as below.

As in the above code snippet , NgxSpinnerService has 2 methods show and hide which are responsible for showing and hiding the spinner.

Step4:

Now use <ngx-spinner></ngx-spinner> directive in your template.

Now run your application using “ng serve” command you should see a spinner.

ngx-spinner has below attributes.

bdcolor - to set the background color
size - to set the size of the spinner
color - to set the color of the spinner
type - to set the type of the spinner
fullscreen - to enable/disable full screen mode
name - to set the name of the spinner if there are multiple instances of the spinners

Note:- You might encounter some errors while using ngx-spinner in your application , in such case try to install the version of ngx-spinner that is compatible with your Angular CLI version.

In next post , will discuss about using multiple instances of ngx-spinners using name attribute.