IntersectionObserverDirective
is a directive that implements the Intersection Observer API. It emits an event each
time the host element intersects with the viewport.
To use the IntersectionObserverDirective
, add the vlhIntersectionObserver
attribute to an element in your template.
Bind a method to the (intersection)
output event to handle the intersection event.
Here's an example:
<div vlhIntersectionObserver (intersection)="onIntersection($event)"></div>
ExponentiallyBackoff
is a function that implements exponential backoff in observables.
This function takes four parameters:
-
maxRetryAttempts
: The maximum number of retry attempts. Default is 3. -
initialDelay
: The initial delay in milliseconds before the first retry. Default is 1000. -
maxDelay
: The maximum delay in milliseconds between retries. Default is 2 minutes. -
disableAndUseConstantDelayOf
: If provided, disables exponential backoff and uses this constant delay instead.
It returns a function that takes an Observable and returns an Observable with retry logic applied.
Here's an example:
ExponentiallyBackoff(10, 1000, 2 * 60 * 1000, 5000);
TimeoutBackoff
is a function that implements timeout backoff in observables.
This function takes three parameters:
-
maxRetryAttempts
: The maximum number of retry attempts. Default is 3. -
initialDelay
: The initial delay in milliseconds before the first retry. Default is 1000. -
maxDelay
: The maximum delay in milliseconds between retries. Default is 2 minutes.
It returns a function that takes an Observable and returns an Observable with retry logic applied.
Here's an example:
TimeoutBackoff(10, 1000, 2 * 60 * 1000);
-
CustomEventWorker
A class that helps create and listen to custom events. -
PollingWorker
A class that helps create and manage polling tasks. -
ServerSentEventWorker
A class that helps listen to server-sent events. -
StoreWorker
A class that helps manage data flow using the Redux pattern. -
SubscriptionWorker
A class that helps manage subscriptions to observables. -
WebsocketWorker
A class that helps send/read messages to/from a websocket connections.
When bootstrapping each class, it is best to use the provided PROVIDER_FACTORY
helpers.
const workerInjectionToken = new InjectionToken<CustomEventWorker<T>>('worker');
providers: [
CUSTOM_EVENT_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<CustomEventWorker<T>>('worker');
providers: [
CUSTOM_EVENT_PROVIDER_FACTORY(workerInjectionToken, {
replySubjectBufferSize: 1,
windowObjectInjectionToken: CUSTOM_EVENT_WINDOW_OBJECT,
windowObject: window
}),
]
customEventWorker.DispatchCustomEvent(window, 'type', data);
customEventWorker.DispatchCustomEvent(window, 'type', data);
customEventWorker.dispatch(data);
customEventWorker.dispatch(data, eventInitDict);
customEventWorker.listen$();
customEventWorker.listen$((data: T) => data.key === 'value');
customEventWorker.listen$(
(data: T) => data.key === 'value',
(prev: T, curr: T) => prev.key === curr.key
);
customEventWorker.listen$().pipe(
filter((data: T) => data.key === 'value')
);
const workerInjectionToken = new InjectionToken<PollingWorker<T>>('worker');
providers: [
POLLING_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<PollingWorker<T>>('worker');
providers: [
POLLING_PROVIDER_FACTORY(workerInjectionToken, {
windowObjectInjectionToken: POLLING_WINDOW_OBJECT,
windowObject: window
}),
]
pollingWorker.startPolling(url);
pollingWorker.startPolling(url, 1000);
pollingWorker.startPolling(url, 1000, (data: T) => data.key === 'value');
pollingWorker.startPolling(
url,
1000,
(data: T) => data.key === 'value',
(prev: T, curr: T) => prev.key === curr.key
);
pollingWorker.startPolling(url, 1000).pipe(
filter((data: T) => data.key === 'value')
);
const workerInjectionToken = new InjectionToken<ServerSentEventWorker<T>>('worker');
providers: [
SERVER_SENT_EVENT_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<ServerSentEventWorker<T>>('worker');
providers: [
SERVER_SENT_EVENT_PROVIDER_FACTORY(workerInjectionToken, {
windowObjectInjectionToken: SERVER_SENT_EVENT_WINDOW_OBJECT,
windowObject: window
}),
]
serverSentEventWorker.connect();
serverSentEventWorker.listen$();
serverSentEventWorker.listen$((data: T) => data.key === 'value');
serverSentEventWorker.listen$(
(data: T) => data.key === 'value',
(prev: T, curr: T) => prev.key === curr.key
);
serverSentEventWorker.listen$().pipe(
filter((data: T) => data.key === 'value')
);
const workerInjectionToken = new InjectionToken<StoreWorker<T>>('worker');
providers: [
STORE_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<StoreWorker<T>>('worker');
providers: [
STORE_PROVIDER_FACTORY(workerInjectionToken, {
windowObjectInjectionToken: STORE_WINDOW_OBJECT,
windowObject: window
}),
]
const workerInjectionToken = new InjectionToken<SubscriptionWorker<T>>('worker');
providers: [
SUBSCRIPTION_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<SubscriptionWorker<T>>('worker');
providers: [
SUBSCRIPTION_PROVIDER_FACTORY(workerInjectionToken, {
windowObjectInjectionToken: SUBSCRIPTION_WINDOW_OBJECT,
windowObject: window
}),
]
subscriptionWorker.add(subscriptionLike);
subscriptionWorker.unsubscribe();
subscriptionWorker.map('key', subscriptionLike);
subscriptionWorker.unsubscribeMapped('key');
subscriptionWorker.unsubscribeAllMapped();
const workerInjectionToken = new InjectionToken<WebsocketWorker<T>>('worker');
providers: [
WEBSOCKET_PROVIDER_FACTORY(workerInjectionToken)
]
const workerInjectionToken = new InjectionToken<WebsocketWorker<T>>('worker');
providers: [
WEBSOCKET_PROVIDER_FACTORY(workerInjectionToken, {
windowObjectInjectionToken: WEBSOCKET_WINDOW_OBJECT,
windowObject: window
}),
]