Ngonis HTTP Loader Library

An Angular library that provides a simple HTTP loader component, which displays a loading spinner during HTTP requests.

Installation

To install the ngonis-http-loader library, use npm:

npm install ngonis-http-loader

Usage

1. Import the Library

First, import the NgonisHttpLoaderModule from ngonis-http-loader into your Angular application's main module (AppModule).

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HttpLoaderModule } from 'ngonis-http-loader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // Ensure HttpClientModule is imported
    NgonisHttpLoaderModule.forRoot(), // Import the HttpLoaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Add the Loader Component to Your Application

Include the <ngonis-http-loader></ngonis-http-loader> component in your AppComponent template to make the loader visible during HTTP requests.

<!-- app.component.html -->
<ngonis-http-loader></ngonis-http-loader>
<router-outlet></router-outlet>

3. Customize the Loader (Optional)

If you want to customize the look of the loader, you can override the styles in your global styles.css or in your component’s styles.

Example for overriding the loader styles:

/* styles.css */
ngonis-http-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}

ngonis-http-loader .spinner {
  width: 60px;
  height: 60px;
  border: 10px solid rgba(0, 0, 0, 0.1);
  border-top: 10px solid #ff5733;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. Ensure HTTPClientModule is Included

Make sure that HttpClientModule is imported in your AppModule to allow the HTTP requests to be intercepted by the loader.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule, // Import this to enable HTTP services
  ],
})
export class AppModule { }

How It Works

The NgonisHttpLoaderModule uses an HTTP interceptor to track ongoing HTTP requests. When a request starts, the loader becomes visible. Once all requests are completed, the loader hides automatically.

Example

// example.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-root',
  template: `
    <ngonis-http-loader></ngonis-http-loader>
    <div>
      <button (click)="fetchData()">Fetch Data</button>
      <pre>{{ data | json }}</pre>
    </div>
  `,
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private exampleService: ExampleService) {}

  ngOnInit(): void {}

  fetchData(): void {
    this.exampleService.getData().subscribe(response => {
      this.data = response;
    });
  }
}