propertiesObservable()

Observable creation operator

Creates an observable that emits the value of a properties on an component whenever properties change. It uses the same underlying implementation as propertyObservable() operator, in conjunction with combineLatest() operator, to observe multiple properties at once.

propertiesObservable(cmp, ...properties)

Creates an observable emitting the values of multiple properties on a Stencil component whenever they change.

function propertiesObservable<T extends ComponentInterface, K extends keyof T>(cmp: T, ...properties: K[]): Observable<Pick<T, K>>;
function propertiesObservable<P extends object>(cmp: ComponentInterface, ...properties: (keyof P)[]): Observable<P>;

Arguments:

• cmp (ComponentInterface) – The Stencil component instance for which to observe the properties.

• ...properties (PropertyKey) – The names of the properties to observe.

Returns:

Observable that emits an object containing the latest values of the specified properties whenever any of the properties change.

Return type:

Record<PropertyKey, unknown>

Hint

Operator can infer the type of properties from the component only if the observed properties are declared as public and have a type annotation. Otherwise, you will need to provide the types explicitly or deal with any type.

Example

Observe multiple properties on a Stencil component

import {
    Component,
    ComponentInterface,
    h,
} from '@stencil/core';
import { propertiesObservable } from '@runopenode/rxjs-stencil';
import { Observable } from 'rxjs';

@Component({
    tag: 'my-cmp',
    shadow: true,
})
class MyCmp implements ComponentInterface {

    public foo: string;

    public bar: number;

    public constructor() {
         propertiesObservable(this, 'foo', 'bar')
             .subscribe(({foo, bar}): void => {
                 // Handle changes to foo and bar
             });
    }

    public render(): any {
        // Render component template
    }
}