ngx-spinner in Angular

Introduction

In this article we are going to implement Angular Spinner

Step 1 :

npm install –g @angular/cli

Step 2 : Install ngx-spinner

npm i  ngx-spinner

Step 3 : app.component.ts

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 {
}

Step 4: app.component.html

<div class="container-fluid py-3">
  <h1>Angular Spinner</h1>

  <div class="d-grid gap-2 col-4 mt-4 mx-auto">
    <select name="type" #type="ngModel" [(ngModel)]="typeSelected" required [class.is-invalid]="type.invalid && (type.dirty || type.touched)" class="form-select form-select-sm">
      <option value="ball-fussion">Ball Fussion</option>
      <option value="ball-grid-beat">Ball Grid Beat</option>
      <option value="ball-grid-pulse">Ball Grid Pulse</option>
      <option value="ball-newton-cradle">Ball Newton Cradle</option>
      <option value="ball-pulse">Ball Pulse</option>
      <option value="ball-pulse-rise">Ball Pulse Rise</option>
      <option value="ball-pulse-sync">Ball Pulse Sync</option>
      <option value="ball-rotate">Ball Rotate</option>
      <option value="ball-running-dots">Ball Running Dots</option>
      <option value="ball-scale">Ball Scale</option>
      <option value="ball-scale-multiple">Ball Scale Multiple</option>
      <option value="ball-scale-pulse">Ball Scale Pulse</option>
      <option value="ball-scale-ripple">Ball Scale Ripple</option>
      <option value="ball-spin-fade-rotating">Ball Spin Fade Rotating</option>
      <option value="ball-spin-rotate">Ball Spin Rotate</option>
      <option value="ball-square-clockwise-spin">Ball Square Clockwise Spin</option>
      <option value="line-scale">Line Scale</option>
      <option value="line-scale-party">Line Scale Party</option>
      <option value="line-scale-pulse-out">Line Scale Pulse Out</option>
      <option value="line-scale-pulse-out-rapid">Line Scale Pulse Out Rapid</option>
      <option value="line-spin-clockwise-fade">Line Spin Clockwise Fade</option>
      <option value="line-spin-clockwise-fade-rotating">Line Spin Clockwise Fade Rotating</option>
      <option value="line-spin-fade">Line Spin Fade</option>
      <option value="line-spin-fade-rotating">Line Spin Fade Rotating</option>
      <option value="pacman">Pacman</option>
      <option value="square-jelly-box">Square Jelly Box</option>
      <option value="square-loader">Square Loader</option>
      <option value="square-spin">Square Spin</option>
      <option value="timer">Timer</option>
      <option value="triangle-skew-spin">Triangle Skew Spin</option>
    </select>
    <div *ngIf="type.invalid && (type.dirty || type.touched)" class="invalid-feedback">
      <div *ngIf="type.errors?.required">This field is required.</div>
    </div>
    <button type="button" class="btn btn-sm btn-primary" (click)="showSpinner()">Show Spinner</button>
  </div>
</div>

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

Step 5 : app.component.ts

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 {

  typeSelected: string;

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

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

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

}

Step 6 :

now using below command  we can see the following output:

ng serve

Output :