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.