@bespunky/angular-zen Official Docs
  1. Directives
  2. ObserveMapDirective

File

core/src/rxjs/observe/abstraction/observe-map-base.directive.ts

Description

The base class for *observe directives combining observables using a map of observable values (i.e. { x: x$, y: y$ }).

Emitted values will be available as the implicit context values but will also be spread into the context by key. Meaning, this would work:

<div *observeXXX="{ x: x$, y: y$ } as result">{{result.x}}</div>

And this also:

<div *observeXXX="{ x: x$, y: y$ }; let x = x">{{x}}</div>

Extends

ObserveBaseDirective

Index

Properties
Methods
Outputs

Outputs

completeCalled
Type : EventEmitter<void>
Inherited from ObserveBaseDirective
Defined in ObserveBaseDirective:81

Triggered when the observable completes. $event will be the void.
errorCalled
Type : EventEmitter<>
Inherited from ObserveBaseDirective
Defined in ObserveBaseDirective:75

Triggered when an error occurs in the observable's pipeline. $event will be the error.
nextCalled
Type : EventEmitter<TResolved>
Inherited from ObserveBaseDirective
Defined in ObserveBaseDirective:69

Triggered whenever the observable emits a value. $event will be the emitted value.

Methods

Protected createViewContext
createViewContext(data: literal type)
Inherited from ObserveBaseDirective
Parameters:
Name Type Optional
data literal type No
Returns: TContext
ObserveBaseDirective:32
ngOnInit
ngOnInit()
Inherited from ObserveBaseDirective
Returns: void
ObserveBaseDirective:117
Protected Abstract observeInput
observeInput(input: TInput)
Inherited from ObserveBaseDirective

Takes the input passed to the directive (which might be an observable, a map or an array of observable for example) and creates an observable that combines and represents all the observables in the value.

Intended for applying functions like combineLatest(), contact(), etc.

Parameters:
Name Type Optional Description
input TInput No

The input passed to the directive (which might be an observable, a map or an array of observable for example).
Returns: Observable<TResolved>

An observable which combines and represents all the observables in the input value.
ObserveBaseDirective:134
ngOnDestroy
ngOnDestroy()
Inherited from Destroyable
Returns: void
Destroyable:38
Protected subscribe
subscribe(observable: Observable, next?: (value?: T) => void, error?: (undefined) => void, complete?: () => void)
Inherited from Destroyable
Type parameters:
  • T

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

Parameters:
Name Type Optional Description
observable Observable<T> No

The observable to subscribe to.
next function Yes

(Optional) A callback function to execute on each emission of the observable.
error function Yes

(Optional) A callback function to execute when the observable errors.
complete function Yes

(Optional) A callback function to execute when the observable completes.
Returns: Subscription

The subscription created for the observable.
Destroyable:58

Properties

Protected Readonly input
Type: BehaviorSubject<TInput | null>
Default value: new BehaviorSubject(null as TInput | null)
Inherited from ObserveBaseDirective

Why BehaviorSubject<s | null> and not Subject<TInput>

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.
ObserveBaseDirective:105
Protected Abstract Readonly selector
Type: string
Inherited from ObserveBaseDirective

The selector defined for the directive extending this class. Will be used to create a corresponding property in the view context in order to make the micro-syntax as keyword work.
ObserveBaseDirective:93
Protected Readonly destroyed
Type: Subject<void>
Default value: new Subject()
Inherited from Destroyable

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

observable.pipe(takeUntil(this.destroyed)).subscribe(...);
Destroyable:28
Protected Readonly subscriptions
Type: Subscription
Default value: new Subscription()
Inherited from Destroyable

A list of all subscriptions manually added using the subscribe() method. These are automatically unsubscribed when ngOnDestroy() is called.
Destroyable:36 
import { Directive  } from '@angular/core';
import { Observable } from 'rxjs';

import { ObserveBaseDirective                           } from './observe-base.directive';
import { ObservableMap, EmittedMapOf, ObserveMapContext } from './types/maps';

/**
 * The base class for `*observe` directives combining observables using a map of observable values (i.e. { x: x$, y: y$ }).
 *
 * Emitted values will be available as the implicit context values but will also be spread into the context by key.
 * Meaning, this would work:
 * ```html
 * <div *observeXXX="{ x: x$, y: y$ } as result">{{result.x}}</div>
 * ```
 * 
 * And this also:
 * ```
 * <div *observeXXX="{ x: x$, y: y$ }; let x = x">{{x}}</div>
 * ```
 * 
 * @export
 * @abstract
 * @class ObserveMapDirective
 * @extends {ObserveBaseDirective<TInput, EmittedMapOf<TInput>, TContext>}
 * @template TInput The type of observable map.
 * @template TContext The the of context the directive will provide to the view.
 */
@Directive()
export abstract class ObserveMapDirective<TInput extends ObservableMap, TContext extends ObserveMapContext<TInput>>
              extends ObserveBaseDirective<TInput, EmittedMapOf<TInput>, TContext>
{
    protected override createViewContext(data: { value?: EmittedMapOf<TInput> | null , source?: Observable<EmittedMapOf<TInput>> }): TContext
    {
        // Spread the values emitted from the observable to allow `let` microsyntax and directly accessing them
        return { ...super.createViewContext(data),  ...data.value };
    }
}

results matching ""

    No results matching ""