How To Add Loader/Spinner In Angular

In this article, we will learn how to show loader in Angular Using the Ngx Spinner library. Ngx Spinner library is used to load spinner in angular which means when data is in progress state the loader is shown to display the loading state of data in the application.

Let’s Start:-

Step 1: – Create a new angular application using the following command.

ng new SpinnerDemo

Step 2:- Install Ngx Spinner using following command

npm install ngx-spinner --save

Note:- while installing spinner if getting error install using –force (npm install ngx-spinner --force).

Step 3:- After Installing the spinner now import the spinner in app.module.ts.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxSpinnerModule } from 'ngx-spinner';
import { HttpClientModule } from '@angular/common/http'   
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoaderDemoComponent } from './loader-demo/loader-demo.component';

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

Note :- Here I have imported NgxSpinnerModule and BrowserAnimationsModule which is used for animating the spinner.

Step 4:-  Now let’s create a new component in which we will use a spinner. Create a new component as  LoaderDemo using the following command.

ng g c LoaderDemo 

Step 5:- Now let’s create a new service that we will call our API using httpClient. Create service using the following command

ng g s LoaderDemo

Step 6:- Add API Url in environment.ts  

export const environment = {
  production: false,
  apiUrl: "https://api.publicapis.org/entries"
};

Note:- Here I m using Demo Api for demonstration. Replace the API URL with your API URL.

Step 7:- Update the loader-demo.service.ts  file as given below

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
@Injectable({
  providedIn: 'root',
})
export class LoaderDemoService {
  url = environment.apiUrl;
  constructor(private httpclient: HttpClient) {}

  getallData() {
    return this.httpclient.get(this.url);
  }
}

Step 8:-  Now Update your loader-demo.component.ts file as shown below.

import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { LoaderDemoService } from '../loader-demo.service';

@Component({
  selector: 'app-entries',
  templateUrl: './loader-demo.component.html',
  styleUrls: ['./loader-demo.component.scss'],
})
export class LoaderDemoComponent implements OnInit {
  entries: any;
  constructor(
    private loaderService: LoaderDemoService,
    private spinnerService: NgxSpinnerService
  ) {}

  ngOnInit(): void {
    this.getallentries();
  }

  getallentries() {
    this.spinnerService.show();
    this.loaderService.getallData().subscribe((res: any) => {
      if (res) {
        this.entries = res.entries;
        console.log(this.entries);
        this.spinnerService.hide();
      }
    });
  }
}

Note:-  Here we are using LoaderDemoService and NgxSpinnerService. LoaderDemoService will call make API Call and from NgxSpinnerService we will show and hide our loader.

we will show the loader on the API call and when we get the response we will hide the loader.

Step 9:- Update the loader-demo.component.html  file as below

<div>  
    <table class="table table-dark table-striped">  
      <thead>  
        <tr>  
            <th>#</th>
            <th>API</th>
            <th>Category</th>
            <th>Description</th>
            <th>URL</th> 
        </tr>  
      </thead>  
      <tbody>  
        <tr *ngFor="let item of entries; index as i">
            <td>{{ i + 1 }}</td>
            <td>{{ item.API }}</td>
            <td>{{ item.Category }}</td>
            <td>{{ item.Description }}</td>
            <td><a [routerLink]="[item.link]"></a>{{ item.Link }}</td>
        </tr>
      </tbody>  
    </table>  
  </div>  
  <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Loading... </p></ngx-spinner>

Note:- Here we have imported Custom Ngx-spinner to show loader.

Step 10:-  Add below code in your loader-demo.component.scss 

.table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table td,
.table th {
  border: 1px solid #ddd;
  padding: 8px;
}

.table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.table tr:hover {
  background-color: #ddd;
}

.table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4b4b4b;
  color: white;
}

Step : 11:-   Add Route in app-routing.module.ts like below.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoaderDemoComponent } from './loader-demo/loader-demo.component';

const routes: Routes = [
  {
    path: '',
    component: LoaderDemoComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Step : 12:-  Now run your angular application using the below command.

npm start 

You will see a loader when data is loading . Once data get loaded, the Loader hides.

You can find the complete demo here How to Add Spinner/Loader in Angular .

Thanks for Reading.Hope this article helps you