Response State

response-state is a HTTP response state indicator handling the life-cycle of the service call from loading, successfull to catched error or if it has been initiated. response-state was created in mind of handling day-to-day operations of http-services for any Angular RxJS project.

Usage

Getting started

npm install response-state

Usage

Service

Begin by extending it to service. Inside the http-request, handle the state as following:

import { HttpClient } from '@angular/common/http';
import { ResponseStateService } from 'response-state';

@Injectable({
  providedIn: 'root'
})
export class YourService extends ResponseStateService {

  constructor(private http: HttpClient) {
    super();
  }

  fetch() {
    // set responseState$ to loading
    this.setLoading();
    return this.http.get(/*insert url*/)
        .pipe(
            map(() => {
                // set responseState$ to successful
                this.setSuccess();
            }),
            catchError(() => {
                // set responseState$ to Error
                this.setError();
            }),
        );
  }

}

Component (*.component.ts)

Initiate the request from your component and observe on the response state observable as below.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ResponseState } from 'response-state';
import { Observable } from 'rxjs';
import { YourService } from './your.service';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  constructor(private readonly service: YourService) { }

  public readonly state$: Observable<ResponseState> = this.service.responseState$;
  public readonly responseStateTypes: typeof ResponseState = this.service.responseStateTypes;

  // Initiater of your fetch function (use however you would like)
  fetch(): void {
    this.service.fetchData();
  }

Template (*.component.html)

Observe on the state asynchronously and handle loading, success and error cases as needed.

<main *ngIf="(state$ | async) as state">
  <your-loading-component *ngIf="state === responseStateTypes.loading"></your-loading-component>
  <your-success-component *ngIf="state === responseStateTypes.success"></your-success-component>
  <your-error-component *ngIf="state === responseStateTypes.error"></your-error-component>
</main>

API

Operators

| Property | Description | | ----- | ----- | | setLoading | Sets the responseStateType$ to loading | | setError | Sets the responseStateType$ to error | | setSuccess | Sets the responseStateType$ to success |

Subscriptions

| Property | Type | Description | | ----- | ----- | ----- | | isLoading$ | Observable<boolean> | Promise that returns if responseState is set to loading | | isError$ | Observable<boolean> | Promise that returns if responseState is set to error | | isSuccess$ | Observable<boolean> | Promise that returns if responseState is set to success | | responseState$ | Observable<ResponseState> | Promise that returns ResponseState |

Other

| Property | Type | Description | | ----- | ----- | ----- | | responseStateTypes() | typeof ResponseState | Returns type of's ResponseState |

ResponseState (enum)

| Key | Description | | ----- | ----- | | None | When the service has not initiated. May be used to reset the state of the response. | | Loading | Used to check/set state to loading | | Success | Used to check/set state to success | | Error | Used to check/set state to error |

Support

The following table provides the status for response-state versions under support. As a general rule, the latest version of Angular will be maintained for response-state and supported. We strive to keep up-to-date with latest version as soon as available.

| Package version | Angular version | Status | | --------------- | --------------- | ------- | | ^1.0.0 | ^13.0.0 | Active |