@rx-angular/template
Version:
**Fully** Reactive Component Template Rendering in Angular. @rx-angular/template aims to be a reflection of Angular's built in renderings just reactive.
125 lines (124 loc) • 6.21 kB
TypeScript
import { AfterContentInit, OnDestroy } from '@angular/core';
import { _RxVirtualView, _RxVirtualViewContent, _RxVirtualViewPlaceholder } from './model';
import * as i0 from "@angular/core";
/**
* The RxVirtualView directive is a directive that allows you to create virtual views.
*
* It can be used on an element/component to create a virtual view.
*
* It works by using 3 directives:
* - `rxVirtualViewContent`: The content to render when the virtual view is visible.
* - `rxVirtualViewPlaceholder`: The placeholder to render when the virtual view is not visible.
* - `rxVirtualViewObserver`: The directive that observes the virtual view and emits a boolean value indicating whether the virtual view is visible.
*
* The `rxVirtualViewObserver` directive is mandatory for the `rxVirtualView` directive to work.
* And it needs to be a sibling of the `rxVirtualView` directive.
*
* @example
* ```html
* <div rxVirtualViewObserver>
* <div rxVirtualView>
* <div *rxVirtualViewContent>Virtual View 1</div>
* <div *rxVirtualViewPlaceholder>Loading...</div>
* </div>
* </div>
* ```
*
* @developerPreview
*/
export declare class RxVirtualView implements AfterContentInit, _RxVirtualView, OnDestroy {
#private;
/**
* Useful when we want to cache the templates and placeholders to optimize view rendering.
*
* Enabled by default.
*/
readonly cacheEnabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* Whether to start with the placeholder asap or not.
*
* If `true`, the placeholder will be rendered immediately, without waiting for the content to be visible.
* This is useful when you want to render the placeholder immediately, but you don't want to wait for the content to be visible.
*
* This is to counter concurrent rendering, and to avoid flickering.
*/
readonly startWithPlaceholderAsap: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* This will keep the last known size of the host element while the content is visible.
*/
readonly keepLastKnownSize: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* Whether to use content visibility or not.
*
* It will add the `content-visibility` CSS class to the host element, together with
* `contain-intrinsic-width` and `contain-intrinsic-height` CSS properties.
*/
readonly useContentVisibility: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* Whether to use containment or not.
*
* It will add `contain` css property with:
* - `size layout paint`: if `useContentVisibility` is `true` && placeholder is visible
* - `content`: if `useContentVisibility` is `false` || content is visible
*/
readonly useContainment: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
/**
* The strategy to use for rendering the placeholder.
*/
readonly placeholderStrategy: import("@angular/core").InputSignal<string>;
/**
* The strategy to use for rendering the content.
*/
readonly contentStrategy: import("@angular/core").InputSignal<string>;
/**
* A function extracting width & height from a ResizeObserverEntry
*/
readonly extractSize: import("@angular/core").InputSignal<(entry: ResizeObserverEntry) => {
width: number;
height: number;
}>;
/**
* ResizeObserverOptions
*/
readonly resizeObserverOptions: import("@angular/core").InputSignal<ResizeObserverOptions>;
readonly size: import("@angular/core").WritableSignal<{
width: number;
height: number;
}>;
readonly width: import("@angular/core").Signal<string>;
readonly height: import("@angular/core").Signal<string>;
readonly containment: import("@angular/core").Signal<"size layout paint" | "content">;
readonly intrinsicWidth: import("@angular/core").Signal<string>;
readonly intrinsicHeight: import("@angular/core").Signal<string>;
readonly minHeight: import("@angular/core").Signal<string>;
readonly minWidth: import("@angular/core").Signal<string>;
constructor();
ngAfterContentInit(): void;
ngOnDestroy(): void;
registerContent(content: _RxVirtualViewContent): void;
registerPlaceholder(placeholder: _RxVirtualViewPlaceholder): void;
/**
* Shows the content using the configured rendering strategy (by default: normal).
* @private
*/
private showContent$;
/**
* Shows the placeholder using the configured rendering strategy (by default: low).
* @private
*/
private showPlaceholder$;
/**
* Renders a placeholder within the view container, and hides the content.
*
* If we already have a content and cache enabled, we store the content in
* the cache, so we can reuse it later.
*
* When we want to render the placeholder, we try to get it from the cache,
* and if it is not available, we create a new one.
*
* Then insert the placeholder into the view container and trigger a CD.
*/
private renderPlaceholder;
static ɵfac: i0.ɵɵFactoryDeclaration<RxVirtualView, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<RxVirtualView, "[rxVirtualView]", never, { "cacheEnabled": { "alias": "cacheEnabled"; "required": false; "isSignal": true; }; "startWithPlaceholderAsap": { "alias": "startWithPlaceholderAsap"; "required": false; "isSignal": true; }; "keepLastKnownSize": { "alias": "keepLastKnownSize"; "required": false; "isSignal": true; }; "useContentVisibility": { "alias": "useContentVisibility"; "required": false; "isSignal": true; }; "useContainment": { "alias": "useContainment"; "required": false; "isSignal": true; }; "placeholderStrategy": { "alias": "placeholderStrategy"; "required": false; "isSignal": true; }; "contentStrategy": { "alias": "contentStrategy"; "required": false; "isSignal": true; }; "extractSize": { "alias": "extractSize"; "required": false; "isSignal": true; }; "resizeObserverOptions": { "alias": "resizeObserverOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}