Wrapper libraries: Helper components: ReactTemplate

Render an <ng-template> as a child of a React component.

Similarly to ReactContent, this component is used to allow interoperability between Angular and React, in a seamless way for the app developer. One of the ways to achieve that is by allowing to pass in Angular <ng-template>s as render props to React (more on that here).

Usage

The main usage of this is to translate TemplateRef into a React-renderable component, this is done in a similar fashion to ReactContent, by rendering the TemplateRef ourselves (in code) and then appending the rootNodes it exposes to the DOM manually.

To create a ReactTemplate element from a TemplateRef, use the createReactTemplateElement() factory function.

API

Similarly to ReactContent, ReactTemplate has a similar props API. See more details there.

Caveats

Angular doesn't expose much of the API of templates as public APIs, and since re-rendering them can be triggered by almost anything in their scope, it's not always possible to easily tell when to re-render them, after manually rendering them and putting them inside React. Therefore, currently we do manual change detection on these every few hundred ms, which proved to work fine, but is not ideal - any better solutions to this problem are welcomed.