HTTP Interceptors

If you need to track the loading state for every http request status, you can use the built-in HttpLoadingRegistryInterceptor.

Providing the interceptor will automatically provide the loading registry which will take care of your http calls. The http loading registry will be available through the HTTP_LOADING_REGISTRY token.

Example

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

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

To make the interceptor work you must pass a context to each http call that should be tracked by the interceptor.

The interceptor will dynamically create and remove the keys of the registry, allowing you to listen to all state changes.

src/app/app.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import {
  HTTP_LOADING_REGISTRY,
  HTTP_LOADING_CONTEXT,
  LoadingRegistry,
  withHttpLoadingContext,
} from 'ngx-reactive-loading';
import { HttpClient, HttpContext } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: './app.component.html',
})
export class AppComponent implements OnInit {
  readonly someLoading$ = this.loadingRegistry.someLoading([
    'actionName',
    'actionName2',
  ]);
  readonly isActionNameLoading$ = this.loadingRegistry.isLoading('actionName');

  constructor(
    @Inject(HTTP_LOADING_REGISTRY)
    private readonly loadingRegistry: LoadingRegistry,
    private readonly http: HttpClient
  ) {}

  ngOnInit() {
    this.http
      .get('/', { context: withHttpLoadingContext('actionName2') })
      .subscribe();

    // Passing context manually
    this.http
      .get('/', {
        context: new HttpContext().set(HTTP_LOADING_CONTEXT, 'actionName'),
      })
      .subscribe();
  }
}

src/app/app.component.html

<ng-container *ngIf="someLoading$ | async"> Some loading... </ng-container>
<ng-container *ngIf="isActionNameLoading$ | async">
  Action name loading...
</ng-container>

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

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

Utils

withHttpLoadingContext()

Passing http context manually could be onerous, so using withHttpLoadingContext helper could be the best choice.

import { withHttpLoadingContext } from 'ngx-reactive-loading';
import { HttpContext } from '@angular/common/http';

const context: HttpContext = withHttpLoadingContext('api');