Custom tokens

Providing the LoadingService in a component or in a module will allow the use of custom injection tokens that can access to the service instance in the NodeInjector.

Injection Tokens

SOME_LOADING

When injected, it allows you to observe the changes to the state between all service loading property, like the someLoading helper function.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component.ts';
import { HelloComponent } from './hello.component.ts';
import { ReactiveLoadingModule } from 'ngx-reactive-loading';

@NgModule({
  declarations: [AppComponent, HelloComponent],
  imports: [ReactiveLoadingModule.forRoot(['prop1'])],
})
export class AppModule {}

src/app/app.component.ts

import { LoadingService } from 'ngx-reactive-loading';
import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  template: `<app-hello></app-hello>`,
})
export class AppComponent {
  constructor(private readonly loadingService: LoadingService) {
    of(1).pipe(loadingService.track('prop1')).subscribe();
  }
}

src/app/hello.component.ts

import { SOME_LOADING } from 'ngx-reactive-loading';
import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';

@Component({ template: ``, selector: 'app-hello' })
export class HelloComponent {
  constructor(
    @Inject(SOME_LOADING) private readonly someLoading$: Observable<boolean>
  ) {}
}