Simple async state container for RxJS and Angular.
- Stores multiple async operation states: New, Ongoing, Succeed, Failed.
- Gives Observables with the state.
- Has a helper operator for RxJS integration.
- Adapted for using in Angular templates.
- Easily integrates with your custom services and components.
- Has no additional dependencies and complex abstractions.
$ npm i @novyk/ing
import { ing, Ing } from '@novyk/ing';
...
component MyCompontent {
loading = new Ing();
...
}
import { ing, Ing } from '@novyk/ing';
...
component MyCompontent {
...
loadData() {
this.loading.start();
this.dataService
.load()
.pipe(
ing(this.loading),
)
...
}
}
<div *ngIf="loading.ongoing">
Data is loading...
</div>
<div *ngIf="loading.succeed">
...
</div>
Or subscribe to streams:
<div *ngIf="loading.ongoing$ | async">
Data is loading...
</div>
<div *ngIf="loading.succeed$ | async">
...
</div>
Using ngSwitch:
<div [ngSwitch]="loading.status$ | async">
<ng-template ngSwitchCase="Ongoing">
Data is loading...
</ng-template>
<ng-template ngSwitchCase="Succeed">
...
</ng-template>
<ng-template ngSwitchCase="Failed">
Data loading failed!
</ng-template>
</div>
MIT