core/src/rxjs/on-observer/abstraction/on-observer-base.directive.ts
Provides functionality for *onObserver<state>
directives that render templates according to the state of an observable.
Any template assigned with the directive will render when the defined observer calls are intercepted, and destroyed when any other calls are
intercepted. For example, if the directive intercepts next
calls, the view will render on the first value emission, then destroy on
complete
or error
.
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
to delay rendering.
Specify showFor
to automatically destroy the view after a certain duration.
When 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 remaining
property. Elapsed time is provided by the 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.
Create different interception combinations by specifying more than one call name in renderOnCallsTo
.
This allows, for example, the combination of 'error'
and 'complete'
to create a directive named *onObserverFinalized
.
As this base class doesn't know what the properties of the extending class will be, extending classes must:
selector
property. This will allow the directive to
assign the view context with a property which will enable the microsyntax as
keyword.renderOnCallsTo
.@Input() set <selector>
property which will call this.input.next(value)
.@Input() set <selector>ViewMode
property which will set this.viewMode
.@Input() set <selector>ShowAfter
property which will set this.showAfter
.@Input() set <selector>ShowFor
property which will set this.showFor
.@Input() set <selector>CountdownInterval
property which will set this.countdownInterval
.
Properties |
|
Methods |
|
Accessors |
constructor(template: TemplateRef<OnObserverContext<T>>, viewContainer: ViewContainerRef)
|
|||||||||
Parameters:
|
|||||||||
ngOnInit |
ngOnInit()
|
Returns:
void
|
ngOnDestroy |
ngOnDestroy()
|
Inherited from
Destroyable
|
Returns:
void
|
Protected subscribe | ||||||||||||||||||||
subscribe(observable: Observable
|
||||||||||||||||||||
Inherited from
Destroyable
|
||||||||||||||||||||
Type parameters:
|
||||||||||||||||||||
Subscribes to an observable and stores the subscription for automatic disposal.
When
Parameters:
Returns:
Subscription
The subscription created for the observable. |
||||||||||||||||||||
Protected Optional countdownInterval |
Type: DurationAnnotation | "animationFrames"
|
Only used when passing a value to
|
Protected Abstract renderOnCallsTo |
Type: ObserverName | ObserverName[]
|
The observer name(s) for which to intercept calls. |
Protected Abstract Readonly selector |
Type: string
|
The selector defined for the directive extending this class. Will be used to create a corresponding
property in the view context in order to make the micro-syntax |
Protected showAfter |
Type: DurationAnnotation
|
Default value: 0
|
(Optional) The duration for which the directive should wait before rendering the view once an intercepted call is made. You can specify a number, which will be treated as milliseconds, or a string with the format of
Default is TODO: ADD LINK TO TOUR OR FULL WIKI PAGE Read more About render flow. ⚠️ Extending classes should:
|
Protected Optional showFor |
Type: DurationAnnotation
|
(Optional) The duration for which the view should be rendered. When the duration passes, the view will be auto destroyed. You can specify a number, which will be treated as milliseconds, or a string with the format of
During the time the view is rendered, the context will be updated with a countdown object to facilitate any UI part used to
indicate countdown to the user. The countdown will be exposed through the When unspecified, the view will be destroyed immediately once the observer detects a call different to the intercepted ones. TODO: ADD LINK TO TOUR OR FULL WIKI PAGE Read more About render flow. ⚠️ Extending classes should:
|
Protected viewMode |
Type: ViewMode
|
Default value: 'single'
|
(Optional) The view mode the directive will operate in:
Default is ⚠️ Extending classes should:
|
Protected Readonly destroyed |
Type: Subject<void>
|
Default value: new Subject()
|
Inherited from
Destroyable
|
Emits a value when |
Protected Readonly subscriptions |
Type: Subscription
|
Default value: new Subscription()
|
Inherited from
Destroyable
|
A list of all subscriptions manually added using the |
isSingleView |
getisSingleView()
|
Returns:
boolean
|
isMultiView |
getisMultiView()
|
Returns:
boolean
|