The directives provided by the OnObserverModule
aim facilitate and enrich the common practice of conditionally rendering template elements according to observable states (i.e. resolving, next, error, complete).
In other words, they allow you to:
Either import OnObserverModule
directly or the CoreModule
and use the directives.
To use the emitted values, you can use either the as
or the let
microsyntax.
See using inside *observe
directives
Use the microsyntax as
keyword to assign resolved values to a variable.
Use the microsyntax let
keyword to assign the full context object to a variable (e.g. let context
).
Specify a value for showAfter showAfter
to delay rendering.
Specify showFor
to automatically destroy the view after a certain duration.
When {@link OnObserverBaseDirective.showFor showFor
} is specified, the view context will be updated with the time remaining until the view is destroyed and the time elapsed since it was rendered. This allows giving the user feedback in a progress bar, a spinner, a textual timer or any other UI component.
Remaining is provided by the {@link OnObserverContext.remaining remaining
} property. Elapsed time is provided by the {@link OnObserverContext.elapsed elapsed
} property. Access it by assigning a variable using let
, like so:let remaining = remaining
Specify viewMode = 'multiple'
to enable rendering a new view for each intercepted call
instead of updating a single rendered view. This allows stacking logs, notification snackbars, or any other aggregation functionality.
Combined with showFor
, this is great for disappearing messages/notifications.
In multi-view mode, the context will contain the index of the view, which can be used for calculations and styling.