TypeScript icon, indicating that this package has built-in type declarations

12.1.1 • Public • Published

Registry Loading Interceptor

This library provides an interceptor which maps Http Requests to a Loading State. You're able to subscribe per request to the loading state.

Usage Scenarios

  • implicit "isLoadingAny" used for a global spinner indicator to show that anything is going on in the network
  • explicit "isLoading" may be used to show exact loading indicator to a certain context


  1. Import the RegisterLoadingInterceptorModule in your root module (hint: most of the time: app.module.ts)
  2. Create your own SelectorFacade to the loading state



Provides a mechanism to generate an ID from a request. Default ships with a URL to ID example. Trough this Request ID you're able to create a selector to observe the loading state of a single request.


You may not want to map every request to a loading state, this is the place where you can provide a mechanism to filter/exclude request.

  • If using Angular 12, you can provide your own HttpContext based filter.


Create a service which injects RegistryLoadingInterceptorand filters RequestID based on the loadingState$.

Usage Example

App Module Configuration

Root Module (app.module.ts) registration and configuration

  declarations: [AppComponent],
  imports: [
    // ... other imports
export class AppModule { }

Selector Facade

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

  public constructor(
    private readonly loadingRegistry: RegistryLoadingInterceptor,
    @Inject(REQUEST_ID_GENERATOR) private readonly idGenerator: UrlFragmentIdGenerator
  ) {


  public isLoading$(url: string): Observable<boolean> {
    const requestId = this.idGenerator.getIdentifier(url);
    return this.loadingRegistry.loadingState$.pipe(
      map(state => state.has(requestId) ? state.get(requestId) as boolean : false),

  public isAnyLoading$(): Observable<boolean> {
    return this.loadingRegistry.isAnyRequestLoading$;

DataAccess Level: Test DataAccess Example

  providedIn: 'root'
export class TestDataAccessService {

  private static getUsersEndpoint = '/users';

  public userListLoading$: Observable<boolean>;

  public constructor(
    private readonly httpClient: HttpClient,
    private readonly isLoadingService: IsLoadingService
    ) {
    // register request loading listener
    this.userListLoading$ = isLoadingService.isLoading$(TestDataAccessService.getUsersEndpoint);

  public getUsers$(): Observable<unknown> {
    return this.httpClient.get(TestDataAccessService.getUsersEndpoint);

Component Level

import {Component} from '@angular/core';
import {TestDataAccessService} from "./test-data-access.service";
import {IsLoadingService} from "./is-loading.service";

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  public constructor(
    private readonly testDataAccess: TestDataAccessService,
    private readonly isLoadingService: IsLoadingService
  ) {
    // connect the facade with the view
    testDataAccess.userListLoading$.subscribe(res => console.log('explicit', res));
    // implicit loading state, will provide Loadign state for any http request
    this.isLoadingService.isAnyLoading$().subscribe(res => console.log('implicit', res));




Data Sequence Diagram


To use custom Request ID Strategy or custom Request Filtering you just need to provide REQUEST_ID_GENERATOR or REQUEST_ID_GENERATOR.

 {provide: REQUEST_ID_GENERATOR, useClass: CustomIdGenerator},

Package Sidebar


npm i @anexia/registry-loading-interceptor

Weekly Downloads






Unpacked Size

116 kB

Total Files


Last publish


  • valentingavran
  • anx-aster
  • takl95
  • pkrumpl
  • crawl
  • grazianisven
  • anx-hnezbeda
  • anx-astocker