ngx-spinner In Angular

The Code Points August 21, 2022 0 28

In this article, we will learn how to use/implement ngx-spinner in angular. ngx-spinner provide multiple types of template, so user can change easily as per need.

So, let's start with implementation part,

First, we need to create a new angular application using following command.

ng new ngx-spinner-example

Now, install the ngx-spinner npm package using following command.

npm i  ngx-spinner

Now, ngx-spinner module import into the app.module.ts file using following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { NgxSpinnerModule } from 'ngx-spinner';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    NgxSpinnerModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [
    AppComponent,
  ]
})
export class AppModule {
}

Now, open the app.component.ts file and add the following code for spinner hide/show.

import { Component } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  spinnerType: string;

  constructor(private spinnerService: NgxSpinnerService) {
    this.spinnerType= 'ball-fussion';
  }

  public showSpinner(): void {
    this.spinnerService.show();

    setTimeout(() => {
      this.spinnerService.hide();
    }, 5000); // 5 seconds
  }

}

NgxSpinnerService provide the option we can show or hide spinner any time also we can change spinner type.

Now, add the following code for spinner into the app.component.html file.

<div class="container-fluid py-3">
  <h1>Angular Ngx-Spinner</h1>
    <button type="button" class="btn btn-sm btn-primary" (click)="showSpinner()">Show Spinner</button>
  </div>
</div>

<ngx-spinner size="medium" [type]="spinnerType"></ngx-spinner>

Now run the application using ng serve. We are able to see spinner into the browser screen.

Available Options for ngx-spinner

bdColor: RGBA color format. To set background-color for backdrop.

size: Anyone from small, default, medium, large. To set size of spinner, default large.

color: Any css color format. To set color of spinner.

type: Choose any animation spinner from Load Awesome to set the type of spinner.

fullScreen: true or false. To enable/disable fullscreen mode(overlay), default is true.

name: For multiple spinners to set name for spinner, default is primary.

zIndex: For dynamic z-index to set z-index for the spinner, default is 99999.

template: For custom spinner image to set custom template for the custom spinner, default is null.

showSpinner: true or false. To show/hide spinner from template using variable.

disableAnimation: true or false. To enable/disable fade animation of spinner, default is false

Conclusion

In this article, we learned how to implement ngx-spinner in angular using demo application.