I am continuing my Angular article series and today I want to show you how to integrate non Angular code in Angular. Specifically I will be integrating an existing React/Flux component with an Angular host component.
The React component I am using is a treeview that I created as part of another article. I won't be focusing much on the details of the treeview, but if you are interested, you will find all the details in my other article. In short the treeview is created in React and uses Flux for state management.
The React component is self contained and packaged up independently, but how can we go about injecting it into the Angular world?
It turns out that Angular components implement an optional onInit() hook that we can take advantage of to trigger the code to render the React component.
In my host component I define an implementation for the onInit handler where I call my static initialize function to kick off the React rendering. As you can see, I have wrapped the ReactComponent in a class that I am importing in the host.
The initialize method is also pretty straightforward, but notice how I am passing in a title text that is passed down to the React component as a prop.