Angular-async-tracker NPM

angular async tracker

About

A port of angular-promise-tracker to angular 6+ that also supports observables

Installation

Install through npm:

npm install --save angular-async-tracker

Finally use in one of your apps components:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { AsyncTrackerFactory, AsyncTracker } from 'angular-async-tracker';

@Component({
  template: `
    <span *ngIf="asyncTracker.active">Loading...</span>
    <button *ngIf="!asyncTracker.active" (click)="save()">Save</button>
  `
})
export class MyComponent {
  asyncTracker: AsyncTracker;

  constructor(
    private http: HttpClient,
    asyncTrackerFactory: AsyncTrackerFactory
  ) {
    this.asyncTracker = asyncTrackerFactory.create();
  }

  save() {
    const saved: Subscription = this.http
      .post('/foo', { bar: 'bam' })
      .pipe(take(1))
      .subscribe(result => {
        console.log(result);
      });
    // `asyncTracker.add` accepts promises or observable subscriptions
    this.asyncTracker.add(saved);
  }
}