-
Notifications
You must be signed in to change notification settings - Fork 73
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).
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.
Similarly to ReactContent, ReactTemplate has a similar props API. See more details there.
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.