ng-async-event v2.0.0

ng-async-event

Angular UI component that simplifies usage of rx-async-event.

Objectives

This library is a complement to rx-async-event that allows the projection of the state management in rx-async-event into dedicated, re-usable templates.

How to use

Installation

npm i --save ng-async-event

Import the NgAsyncEventModule in the main app module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgAsyncEventModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service

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<number, Post>();

  constructor(private http: HttpClient) { }

  get postEvent$(): AsyncEventObservable<number, Post> {
    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<Post>(`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<Post>(`https://jsonplaceholder.typicode.com/posts/${id}`).toPromise());
  }


}

Component

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<number, Post>;

  constructor(private appService: AppService) {
    this.postEvent$ = this.appService.postEvent$;
  }

  loadPost(id: number) {
    this.appService.loadPost(id);
  }
}

View

<async-event [asyncEvent]="postEvent$ | async">

  <div *asyncEventProcessing="let postId=argument">
    Processing post id {{ postId }}...
  </div>

  <div *asyncEventProcessed="let post=result">
    Post title: {{ post.title }}
  </div>

</async-event>

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 <async-event-defaults>:

<async-event-defaults>
  <div *asyncEventProcessing>
    <img src="spinner.gif">
  </div>

  <div *asyncEventProcessed="let result=result">
    {{ result }}
  </div>

  <div *asyncEventError="let error=error">
    {{ error }}
  </div>
</async-event-defaults>

and then later:

<async-event [asyncEvent]="postEvent$ | async">
  <!-- Default templates will be used  -->
</async-event>

It is also possible to create alternate defaults set using the setName input:

<async-event-defaults setName="debug">
  <div *asyncEventProcessing="let argument=argument">
    Loading {{ argument }}...
  </div>

  <div *asyncEventProcessed="let result=result">
    {{ result | json }}
  </div>

  <div *asyncEventError="let error=error">
    {{ error }}
    <code *ngIf="error.stack">
      {{ error.stack }}
    </code>
  </div>
</async-event-defaults>

and then later reference the setName in <async-event>:

<async-event [asyncEvent]="postEvent$ | async" setName="debug">
  <!-- Default templates for "debug" will be used -->
</async-event>

Template context

The context is passed to templates using Angular Microsyntax.

Please see async-event-template-context.ts for the complete object.