setProperty()

Subscriber

Set a property on a Stencil component and optionally schedule a render.

This function returns a setter function that can be used to update the property value. Common use case is to set it as subscriber to an observable, so that the property is updated whenever the observable emits a new value.

This is a convenience operator that can be used instead of manually setting the property and calling forceUpdate() on the component.

setProperty(cmp, property, options)

Creates a subscriber function that sets a property value from stream on a Stencil component and optionally schedules a render.

function setProperty<T = any>(cmp: ComponentInterface, property: PropertyKey, options: SetPropertyOptions = {}): (value: T) => void
Arguments:

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

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

  • options (SetPropertyOptions) – Optional configuration for the subscriber.

Returns:

Subscriber function that sets a property value on a Stencil component and optionally schedules a render.

Return type:

(value: T) => void

class SetPropertyOptions()

Configuration options for setting a property on a Stencil component.

export type SetPropertyOptions = {
    scheduleRender?: boolean;
    nextTick?: boolean;
};
SetPropertyOptions.scheduleRender
Type:

boolean

Optional: Yes

Default: false

SetPropertyOptions.nextTick
Type:

boolean

Optional: Yes

Default: true

Controls whether the component should be re-rendered on the next tick after the property is set.

Example

Subscribe to an observable and set a property on a Stencil component whenever the observable emits a new value.
 1 import { Component, Prop } from '@stencil/core';
 2 import { Observable } from 'rxjs';
 3 import { setProperty } from '@runopenode/stencil-rxjs';
 4
 5 @Component({
 6     tag: 'my-component',
 7     shadow: true,
 8 })
 9 export class MyComponent {
10
11     private _value: string;
12
13     private _observable$ = new Observable<string>();
14
15     public connectedCallback(): void {
16         this._observable$.subscribe(setProperty(this, '_value', { scheduleRender: true }));
17     }
18 }