renderObservable()

Observable creation operator

Create a new Observable that emits when the component render() function is called. Value will be emitted after the next microtask (next tick).

If component is already rendered, the observable will emit immediately.

It uses hot observable pattern, which means that the observable is shared between all subscribers and emits the same value to all of them.

renderObservable(cmp)

Creates an observable emitting when the component render() function is called.

function renderObservable(cmp: ComponentInterface): Observable<void>;

Arguments:

• cmp (ComponentInterface) – The Stencil component instance to observe.

Returns:

Observable that emits when the component render() function is called.

Return type:

Observable<void>

Example

Initialize custom logic when component is rendered

import {
    Component,
    ComponentInterface,
    h,
} from '@stencil/core';
import { take } from 'rxjs/operators';
import { renderObservable } from '@runopenode/rxjs-stencil';

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

    public constructor() {
         renderObservable(this)
             .pipe(
                 take(1)
             )
             .subscribe((): void => {
                 // Initialize custom logic when component is rendered.
             });
    }

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