Reactive Templates reactive observable rxjs template jsx Source Code

A reactive template is a method that allows you to render DOM elements using Observables combined with JSX syntax. A typescript implementation is available in Github.

Features Setup

To enable TSX support, first we must tell Typescript to use our custom jsx function in the project's tsconfig.json file.

Quick Demo Hello World

The render function is a helper method that will render the nodes in the default container, in this case document.body.

Reactive Hello World

The following code shows the same "Hello World" message as above, but using observables. The be function returns a BehaviorSubject.

Concepts Templates

A template is a function returns a DOM element.

Native Elements Components Element Bindings Attribute Bindings Setters

To set an attribute whenever an observable fires,

Getters

It is possible to listen to attribute changes.

Event Bindings Children Expressions