muhammadawaisshaikh/app.module.ts

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

...

// for token interceptor
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoaderInterceptorService } from './core/interceptors/loader-interceptor/loader-interceptor.service';

...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

## loader-interceptor.service.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';

import { Observable } from 'rxjs';

import { LoaderService } from '../../services/loader/loader.service';

@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {

  private requests: HttpRequest<any>[] = [];

  constructor(
    private loaderService: LoaderService
  ) { }

  removeRequest(req: HttpRequest<any>) {
    const i = this.requests.indexOf(req);
    if (i >= 0) {
      this.requests.splice(i, 1);
    }
    this.loaderService.isLoading.next(this.requests.length > 0);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.requests.push(req);

    console.log("No of requests--->" + this.requests.length);

    this.loaderService.isLoading.next(true);

    return Observable.create(observer => {
      const subscription = next.handle(req)
        .subscribe(
          event => {
            if (event instanceof HttpResponse) {
              this.removeRequest(req);
              observer.next(event);
            }
          },
          err => {
            alert('error' + err);
            this.removeRequest(req);
            observer.error(err);
          },
          () => {
            this.removeRequest(req);
            observer.complete();
          });

      // remove request from queue when cancelled
      return () => {
        this.removeRequest(req);
        subscription.unsubscribe();
      };
    });
  }
}

## loader.component.html
<div *ngIf="loading">
    <img class="loading all-center" src={{loader}} />
    <div class="loader-bg"></div>
</div>

## loader.component.scss
@import '../../../styles.scss';

.loader-bg{
    background: #ffffff;
    opacity: 0.9;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

.loading {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: auto;
}

## loader.component.ts
import { Component, OnInit } from '@angular/core';
import { LoaderService } from '../../core/services/loader/loader.service';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss']
})
export class LoaderComponent implements OnInit {

  loading: boolean;
  loader: any = "../../../../assets/img/loading.gif";

  constructor(
    private loaderService: LoaderService
  ) { }

  ngOnInit(): void {
    this.loaderService.isLoading.subscribe((v) => {
      console.log(v);
      this.loading = v;
    });
  }

}

## loader.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {

  public isLoading = new BehaviorSubject(false);

  constructor() { }
}
	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { AppRoutingModule } from './app-routing.module';
	import { HttpClientModule } from '@angular/common/http';

	...

	// for token interceptor
	import { HTTP_INTERCEPTORS } from '@angular/common/http';
	import { LoaderInterceptorService } from './core/interceptors/loader-interceptor/loader-interceptor.service';

	...

	@NgModule({
	declarations: [
	...
	],
	imports: [
	...
	],
	providers: [
	{
	provide: HTTP_INTERCEPTORS,
	useClass: LoaderInterceptorService,
	multi: true
	}
	],
	bootstrap: [AppComponent]
	})
	export class AppModule { }
	import { Injectable } from '@angular/core';
	import {
	HttpRequest,
	HttpHandler,
	HttpEvent,
	HttpInterceptor,
	HttpResponse
	} from '@angular/common/http';

	import { Observable } from 'rxjs';

	import { LoaderService } from '../../services/loader/loader.service';

	@Injectable({
	providedIn: 'root'
	})
	export class LoaderInterceptorService implements HttpInterceptor {

	private requests: HttpRequest<any>[] = [];

	constructor(
	private loaderService: LoaderService
	) { }

	removeRequest(req: HttpRequest<any>) {
	const i = this.requests.indexOf(req);
	if (i >= 0) {
	this.requests.splice(i, 1);
	}
	this.loaderService.isLoading.next(this.requests.length > 0);
	}

	intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

	this.requests.push(req);

	console.log("No of requests--->" + this.requests.length);

	this.loaderService.isLoading.next(true);

	return Observable.create(observer => {
	const subscription = next.handle(req)
	.subscribe(
	event => {
	if (event instanceof HttpResponse) {
	this.removeRequest(req);
	observer.next(event);
	}
	},
	err => {
	alert('error' + err);
	this.removeRequest(req);
	observer.error(err);
	},
	() => {
	this.removeRequest(req);
	observer.complete();
	});

	// remove request from queue when cancelled
	return () => {
	this.removeRequest(req);
	subscription.unsubscribe();
	};
	});
	}
	}
	<div *ngIf="loading">
	<img class="loading all-center" src={{loader}} />
	<div class="loader-bg"></div>
	</div>
	@import '../../../styles.scss';

	.loader-bg{
	background: #ffffff;
	opacity: 0.9;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	}

	.loading {
	position: absolute;
	z-index: 1;
	width: 100px;
	height: auto;
	}
	import { Component, OnInit } from '@angular/core';
	import { LoaderService } from '../../core/services/loader/loader.service';

	@Component({
	selector: 'app-loader',
	templateUrl: './loader.component.html',
	styleUrls: ['./loader.component.scss']
	})
	export class LoaderComponent implements OnInit {

	loading: boolean;
	loader: any = "../../../../assets/img/loading.gif";

	constructor(
	private loaderService: LoaderService
	) { }

	ngOnInit(): void {
	this.loaderService.isLoading.subscribe((v) => {
	console.log(v);
	this.loading = v;
	});
	}

	}
	import { Injectable } from '@angular/core';
	import { BehaviorSubject } from 'rxjs';

	@Injectable({
	providedIn: 'root'
	})
	export class LoaderService {

	public isLoading = new BehaviorSubject(false);

	constructor() { }
	}