The directives provided by the ObserveModule
aim to enrich the concept presented by the async
pipe.
These directives have 3 main goals:
async
pipes in the template).Any directive from the module will tracks the assigned observable(s) and updates the template with the emitted value(s) on each emission.
Any template assigned with the directive will render immediately, and its view context will be updated with the emitted value on each emission.
Either import ObserveModule
from @bespunky/angular-zen/core
and use the directives in your templates.
import { ObserveModule } from '@bespunky/angular-zen/core';
If you have already imported the
CoreModule
from@bespunky/angular-zen/core
importing theObserveModule
is unnecessary, as theObserveModule
is exported by theCoreModule
.
To use the emitted values, you can use either the as
or the let
microsyntax.
<!-- Will observe produts$ and update the div's content on every emission -->
<div *observe="products$ as products">
<h3>{{ products.length }} products</h3>
<div *ngFor="let product of products">{{ product.name }}</div>
</div>
<!-- Will observe both x$ and y$ using combineLatest(), and update the div's content when either emits a value -->
<div *observeLatest="{ x: x$, y: y$ } as coord">({{ coord.x }}, {{coord.y}})</div>
<!-- Will observe both init$ and progress$ using concat(), and update the div's content first with the messages from init$, then with the values from progress$ -->
<div *observeConcat="[init$, progress$] as statusMessage">{{ statusMessage }}</div>
The watched observable(s) are combined into a new observable, which is then automatically multicasted so that any child observables created by the template will use the same stream.
The shared observable can be accessed using the let source = source
microsyntax.
You can take advantage of the
source
observable and pass it into*onObserver
directives.<div *observeConcat="[init$, progress$] as statusMessage; let source = source"> {{ statusMessage }} <h4 *onObserverError="source">❌ Error.</h4> <h4 *onObserverComplete="source">✅ Done.</h4> </div>
Whenever the observable changes state or emits a value, the corresponding event is emitted:nextCalled
- A value has been emitted. $event
will be the emitted value.errorCalled
- An error has occured in the pipeline. $event
will be the error.completeCalled
- The observable has completed. $event
will be void.
Because of limitations to Angular's Structural Directives, in order to bind the events the desugared syntax must be used. This, for example, will trigger the event:
<ng-template [observe]="x$" let-source="source" (nextCalled)="onNext($event)"> ... </ng-template>
This will NOT trigger the event:
<div *observe="x$; let source = source" (nextCalled)="onNext($event)">...</div>