https://github.com/julienblin/ng-async-event
https://github.com/julienblin/ng-async-event
angular angular2 angular4 angular5 npm rxjs rxjs-observables
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/julienblin/ng-async-event
- Owner: julienblin
- License: mit
- Created: 2018-01-29T15:25:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-02T20:29:00.000Z (almost 7 years ago)
- Last Synced: 2025-02-03T04:29:40.705Z (4 months ago)
- Topics: angular, angular2, angular4, angular5, npm, rxjs, rxjs-observables
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-async-event
- Size: 131 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-async-event
Angular UI component that simplifies usage of [rx-async-event](https://github.com/julienblin/rx-async-event).
[](https://travis-ci.org/julienblin/ng-async-event)
[](https://www.npmjs.com/package/ng-async-event)
## Objectives
This library is a complement to [rx-async-event](https://github.com/julienblin/rx-async-event) that allows the projection of
the state management in [rx-async-event](https://github.com/julienblin/rx-async-event) into dedicated, re-usable templates.
## How to use
### Installation
```shell
npm i --save ng-async-event
```
### Import the NgAsyncEventModule in the main app module
```typescript
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgAsyncEventModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### 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
Processing post id {{ postId }}...
Post title: {{ post.title }}
```
## Default templates
It is also possible to define default templates that will be used if no local template is defined.
In the `app.component.html` file, define them using ``:
```html
{{ result }}
{{ error }}
```
and then later:
```html
```
It is also possible to create alternate defaults set using the `setName` input:
```html
Loading {{ argument }}...
{{ result | json }}
{{ error }}
{{ error.stack }}
```
and then later reference the `setName` in ``:
```html
```
## Template context
The context is passed to templates using [Angular Microsyntax](https://angular.io/guide/structural-directives#microsyntax).
Please see [async-event-template-context.ts](src/app/modules/ng-async-event/async-event-template-context.ts) for the complete object.