UNPKG

@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
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 {};