toProperty()

Pipeable operator

Use this operator to tap into a value stream and flush value to component property. It is shortcut for tap(value => cmp.prop = value). It is useful when you want to bind observable value to component property.

toProperty(cmp, prop)

Creates a pipeable operator that flushes value to component property.

function toProperty<T = unknown>(cmp: ComponentInterface, prop: PropertyKey): MonoTypeOperatorFunction<T>
Arguments:

  • cmp (ComponentInterface) – The Stencil component instance for which to flush value to property.

  • prop (PropertyKey) – The name of the property to flush value to.

Example

Flush observable value to component property.
 1import { Component, h } from '@stencil/core';
 2import { Observable, of } from 'rxjs';
 3import { toProperty, scheduleRender } from '@runopenode/stencil-rxjs';
 4
 5@Component({
 6    tag: 'my-component',
 7    shadow: true,
 8})
 9export class MyComponent {
10
11    private _observable$: Observable<number> = of(1, 2, 3);
12
13    private _value: number = 0;
14
15    public constructor() {
16        this._observable$
17            .pipe(
18                toProperty(this, '_value'),
19                scheduleRender(this),
20            )
21            .subscribe();
22    }
23
24    render() {
25        return (
26            <div>{{ this._value }}</div>
27        );
28    }
29}