https://github.com/julienblin/rx-async-event
https://github.com/julienblin/rx-async-event
angular angular2 angular4 npm rxjs rxjs-observables
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/julienblin/rx-async-event
- Owner: julienblin
- License: mit
- Created: 2017-11-11T18:49:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-02T19:31:11.000Z (almost 7 years ago)
- Last Synced: 2025-02-19T20:41:28.842Z (3 months ago)
- Topics: angular, angular2, angular4, npm, rxjs, rxjs-observables
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rx-async-event
- Size: 31.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rx-async-event
Manages processing / processed / error state (mainly) for Angular applications.
[](https://travis-ci.org/julienblin/rx-async-event)
[](https://www.npmjs.com/package/rx-async-event)
## Objectives
This is a small helper library to help manage processing and processed states for Angular applications.
It allows encapsulation of either a promise or an observable, and emits standardized life cycle events:
- init
- processing
- processed
- error
As a side benefit, it also manages errors so that they bubble up in a managed way (instead of crashing the application).
## How to use
### Installation
```shell
npm i --save rx-async-event
```
### Service
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AsyncEventObservable, AsyncEventSubject } from 'rx-async-event';
import { Post } from './post';
@Injectable()
export class AppService {
private readonly _postEvent$ = new AsyncEventSubject();
constructor(private http: HttpClient) { }
get postEvent$(): AsyncEventObservable {
return this._postEvent$.asObservable();
}
/**
* Example of managing the life cycle of an HttpClient Observable.
*/
loadPost(id: number) {
return this._postEvent$.observe(
id,
this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`));
}
/**
* This example manages the life cycle of a Promise instead.
*/
loadPostAsPromise(id: number) {
return this._postEvent$.execute(
id,
(arg) => this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`).toPromise());
}
}
```
### Component
```typescript
import { Component } from '@angular/core';
import { AppService } from './app.service';
import { Post } from './post';
import { AsyncEventObservable } from 'rx-async-event';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ AppService ]
})
export class AppComponent {
postEvent$: AsyncEventObservable;
constructor(private appService: AppService) {
this.postEvent$ = this.appService.postEvent$;
}
loadPost(id: number) {
this.appService.loadPost(id);
}
}
```
### View
```html
Nothing to display
Processing post id {{postEvent.argument}}...
Post title: {{postEvent.result.title}}
Ohuh - something went wrong: {{postEvent.error.message}}
```