ng2-reactor

A small set of utilities for "closing the loop" to build a uni directional data flow in Angular 2. It provides mechanisms for automatically generating useful Observable's inside of Angular components related to events.

For an example see: ng2-redux-todos

Services

ReactiveComponent

This is a base class that implements all of the lifecycle hooks and proxies them into streams. These streams are provided as protected members for subclasses. This allows you to create workflows that depend upon the angular lifecycle.

The events are mapped using the following pattern: drop the ng, lowcase the first letter, append $. For example:

• ngOnInit -> onInit$
• ngOnDestroy -> onDestroy$

Additionally, lifecycle$ will emit all lifecycle events.

ngOnChanges is handled separately. There is a dedicated changes$ observable containing values are a SimpleChanges object.

Note that helpers are also provided to further split the changes. One may do this.changes$.map(reactiveChange('propertyName')) to focus on a specific property. To get only the value rather than the metadata, one may further use reactiveChangeValue.

ReactiveSource

This is a decorator the produces Observables suitable for click bindings. Any field decorated with this should have a type of Observable. The field will be initialized to an Observable. Furthermore, a shadow property will be also assigned to the object with the name of fieldName_Sink. Component templates may use this shadow property as an output binding to send values through the stream. For instance

@ReactiveSource() private deleteTodo$: Observable<string>;

would be used in a template as

<button (click)="deleteTodo$_Sink(todo.id);">Delete</button>

Form Binding

bindFormState(group: FormGroup) provides a mechanism for synchronizing the value in a form with an observable. This is most useful in conjunction with a redux implementation such as ngrx/store where your form state lives in the application state. This allows form values to be changed simply by dispatching to the store.

The value of the input stream should match the shape of group.valueChanges.

second

Sometimes you want to sample something using Observable#withLatestFrom because Observable#sample is broken. second is a function of 2 arguments that returns its second argument so you don't have to repeatedly write code like (_, v) => v