Subscribes to an observable and stores the subscription for automatic disposal. When ngOnDestroy() is called, all subscriptions created with this method will unsubscribe.

The subscription created for the observable.

Only used when passing a value to showFor.

(Optional) The interval with which countdown updates should be made to the view's context before it auto destroys. The lower the value, the more updates will be made to the context, but the more resources your directive will consume.

You can specify a number, which will be treated as milliseconds, or a string with the format of <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - 3 seconds between each update.
• '10s' - 10 seconds between each update.
• '0.5m' - 30 seconds between each update.
• '100ms' - 100 milliseconds between each update.

You can also specify 'animationFrames' so the countdown gets updated each time the browser is working on animations.

When unspecified, the total duration of the countdown will be divided by DefaultCountdownUpdateCount to get a fixed interval which will make for DefaultCountdownUpdateCount countdown updates.

⚠️ Extending classes should:

1. Declare an @Input() setter named {selector}CountdownInterval (e.g. onObserverCompleteCountdownInterval) which will set this value.
2. Provide the above documentation for the setter property.

Why BehaviorSubject<... | null> and not Subject<...>

input is set from @Input properties. For some reason, Angular passes-in the first value BEFORE ngOnInit, even though other @Input properties (e.g. showAfter, showFor) are passed AFTER ngOnInit. If subscription occurs in the constructor, input will emit the first observable too fast, which might lead to pipes breaking or misbehaving if they rely on properties to be instantiated first.

This leads to subscribing in ngOnInit, to allow Angular time to initialize those. BUT, if input is a Subject, as the first value was already emitted BEFORE ngOnInit, it will not be captured by our subscription to input. Hence the BehaviorSubject - To allow capturing that first observable.

(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 <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - Wait for 3 seconds, then render the view.
• '10s' - Wait for 10 seconds, then render the view.
• '0.5m' - Wait for 30 seconds, then render the view.
• '100ms' - Wait for 100 milliseconds, then render the view.

Default is 0, meaning immediately render the view.

TODO: ADD LINK TO TOUR OR FULL WIKI PAGE Read more About render flow.

⚠️ Extending classes should:

1. Declare an @Input() setter named {selector}ShowAfter (e.g. onObserverCompleteShowAfter) which will set this value.
2. Provide the above documentation for the setter property.

(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 <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - The view will be destroyed after 3 seconds.
• '10s' - The view will be destroyed after 10 seconds.
• '0.5m' - The view will be destroyed after 30 seconds.
• '100ms' - The view will be destroyed after 100 milliseconds.

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 remaining property and the elapsed time through elapsed property in the view context and can both be accessed be declaring a let variable (e.g. let remaining = remaining). See countdownInterval for changing the updates interval.

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:

1. Declare an @Input() setter named {selector}ShowFor (e.g. onObserverCompleteShowFor) which will set this value.
2. Provide the above documentation for the setter property.

(Optional) The view mode the directive will operate in: 'single' - A single view will be rendered on intercepted calls. If a view has already been rendered when a call is intercepted, the existing view will be updated with data from the new call.

'multiple' - Every new intercepted call will render a new view with its own context and data encapsulated from the current call.

Default is 'single'.

⚠️ Extending classes should:

1. Declare an @Input() setter named {selector}ViewMode (e.g. onObserverCompleteViewMode) which will set this value.
2. Provide the above documentation for the setter property.

Emits a value when ngOnDestroy() is called. Pipe together with takeUntil() to auto unsubscribe from your observables.

observable.pipe(takeUntil(this.destroyed)).subscribe(...);

A list of all subscriptions manually added using the subscribe() method. These are automatically unsubscribed when ngOnDestroy() is called.

Renders the template when the specified observable makes any of the calls specified using calls.

Features

View Context

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).

Delayed rendering

Specify a value for showAfter to delay rendering.

Auto destroy

Specify showFor to automatically destroy the view after a certain duration.

Countdown updates

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

Multi view mode

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.

View index

In multi-view mode, the context will contain the index of the view, which can be used for calculations and styling.

Multi call interception

Create different interception combinations by specifying more than one call name using calls. This is how, for example, the combination of 'error' and 'complete' was used to create the *onObserverFinalized directive.

Defines the calls to intercept from the observable. Only intercepted calls will render the template.

(Optional) The view mode the directive will operate in: 'single' - A single view will be rendered on intercepted calls. If a view has already been rendered when a call is intercepted, the existing view will be updated with data from the new call.

'multiple' - Every new intercepted call will render a new view with its own context and data encapsulated from the current call.

Default is 'single'.

(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 <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - Wait for 3 seconds, then render the view.
• '10s' - Wait for 10 seconds, then render the view.
• '0.5m' - Wait for 30 seconds, then render the view.
• '100ms' - Wait for 100 milliseconds, then render the view.

Default is 0, meaning immediately render the view.

TODO: ADD LINK TO TOUR OR FULL WIKI PAGE Read more About render flow.

(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 <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - The view will be destroyed after 3 seconds.
• '10s' - The view will be destroyed after 10 seconds.
• '0.5m' - The view will be destroyed after 30 seconds.
• '100ms' - The view will be destroyed after 100 milliseconds.

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 remaining property and the elapsed time through elapsed property in the view context and can both be accessed be declaring a let variable (e.g. let remaining = remaining). See countdownInterval for changing the updates interval.

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.

Only used when passing a value to showFor.

(Optional) The interval with which countdown updates should be made to the view's context before it auto destroys. The lower the value, the more updates will be made to the context, but the more resources your directive will consume.

You can specify a number, which will be treated as milliseconds, or a string with the format of <number><ms | s | ms>. Numbers can be either integers or floats. For example:

• 3000 - 3 seconds between each update.
• '10s' - 10 seconds between each update.
• '0.5m' - 30 seconds between each update.
• '100ms' - 100 milliseconds between each update.

You can also specify 'animationFrames' so the countdown gets updated each time the browser is working on animations.

When unspecified, the total duration of the countdown will be divided by DefaultCountdownUpdateCount to get a fixed interval which will make for DefaultCountdownUpdateCount countdown updates.