@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.
104 lines (103 loc) • 3.79 kB
TypeScript
import { ChangeDetectorRef, OnDestroy, PipeTransform } from '@angular/core';
import { RxStrategyNames } from '@rx-angular/cdk/render-strategies';
import { NextObserver, Observable, ObservableInput } from 'rxjs';
import * as i0 from "@angular/core";
/**
* @Pipe RxPush
*
* @description
*
* The push pipe serves as a drop-in replacement for angulars built-in async pipe.
* Just like the *rxLet Directive, it leverages a
* [RenderStrategy](https://rx-angular.io/docs/cdk/render-strategies)
* under the hood which takes care of optimizing the ChangeDetection of your component. The rendering behavior can be
* configured per RxPush instance using either a strategy name or provide a
* `RxComponentInput` config.
*
* Usage in the template
*
* ```html
* <hero-search [term]="searchTerm$ | push"> </hero-search>
* <hero-list-component [heroes]="heroes$ | push"> </hero-list-component>
* ```
*
* Using different strategies
*
* ```html
* <hero-search [term]="searchTerm$ | push: 'immediate'"> </hero-search>
* <hero-list-component [heroes]="heroes$ | push: 'normal'"> </hero-list-component>
* ```
*
* Provide a config object
*
* ```html
* <hero-search [term]="searchTerm$ | push: { strategy: 'immediate' }"> </hero-search>
* <hero-list-component [heroes]="heroes$ | push: { strategy: 'normal' }"> </hero-list-component>
* ```
*
* Other Features:
*
* - lazy rendering (see
* [LetDirective](https://github.com/rx-angular/rx-angular/tree/main/libs/template/docs/api/let-directive.md))
* - Take observables or promises, retrieve their values and render the value to the template
* - a unified/structured way of handling null, undefined or error
* - distinct same values in a row skip not needed re-renderings
*
* @usageNotes
*
* ```html
* {{observable$ | push}}
* <ng-container *ngIf="observable$ | push as o">{{o}}</ng-container>
* <component [value]="observable$ | push"></component>
* ```
*
* @publicApi
*/
export declare class RxPush implements PipeTransform, OnDestroy {
private cdRef;
/** @internal */
private strategyProvider;
/** @internal */
private ngZone;
/**
* @internal
* This is typed as `any` because the type cannot be inferred
* without a class-level generic argument, which was removed to
* fix https://github.com/rx-angular/rx-angular/pull/684
*/
private renderedValue;
/** @internal */
private subscription;
/** @internal */
private readonly templateObserver;
private readonly templateValues$;
/** @internal */
private readonly strategyHandler;
/** @internal */
private patchZone;
/** @internal */
private _renderCallback;
constructor(cdRef: ChangeDetectorRef);
transform<U>(potentialObservable: null, config?: RxStrategyNames | Observable<RxStrategyNames>, renderCallback?: NextObserver<U>): null;
transform<U>(potentialObservable: undefined, config?: RxStrategyNames | Observable<RxStrategyNames>, renderCallback?: NextObserver<U>): undefined;
transform<U>(potentialObservable: ObservableInput<U> | U, config?: RxStrategyNames | Observable<RxStrategyNames>, renderCallback?: NextObserver<U>): U;
transform<U>(potentialObservable: ObservableInput<U>, config?: PushInput<U>): U;
/** @internal */
ngOnDestroy(): void;
/** @internal */
private setPatchZone;
/** @internal */
private handleChangeDetection;
/** @internal */
private render;
/** @internal */
private hasInitialValue;
static ɵfac: i0.ɵɵFactoryDeclaration<RxPush, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<RxPush, "push", true>;
}
interface PushInput<T> {
strategy?: RxStrategyNames | Observable<RxStrategyNames>;
renderCallback?: NextObserver<T>;
patchZone?: boolean;
}
export {};