Use an Angular component inside a React App with Angular Elements
You have different teams, using different frontend technologies, but you still want to share components? In this lesson we'll learn how to leverage Angular elements to compile an Angular material form component to a reusable "custom element" and include it in an existing React app.
Instructor: [00:00] Let's do something more interesting. What we want to do is to use this angular component here and wrap it as an angular element, and use it then within an existing React app.
[00:11] In a set up here, I have already an angular element project inside this folder. It is a normal angular project generated with the CLI. We have here a feedback form component which is a reactive form using here material components.
[00:26] These are already wrapped up and ready to be used as an angular element. We have to form registration here. We also use here the angular elements API to export it as a custom element.
[00:38] Everything gets build and done, basically generated this ng elements JavaScript file which contains my angular element. We use it here in a normal index HTML file already.
[00:51] You can also see that we basic subscribed to that feedbackSubmit event which the angular element here broadcasts. If I write something inside here and click here the button, that event gets triggered and we've write the result on the console.
[01:05] Let's see how we can use that now inside a React application. I have already here a folder where I generate the new React application. It's the first time I would like to copy over our assets, so basically, our angular element which we have just generated.
[01:22] Let me grab here to the JavaScript file as well as the styles file and copy it inside that assets folder. Next, we go inside a React app and use that index HTML file, and first of all include here the styles file of our angular element.
[01:41] For down here just before the body tag closes, I'm also including the script tag, so that our angular element can be loaded.
[01:48] With that, we should be set up on our angular element part. Now, let's open up the source code of our React application, specifically that app JS file. Let's use the angular element inside the render part here after React component.
[02:04] If would have purpose, I'm simply including our feedback form tag which makes up our angular element. Let's save it. Let's also start our React app, so we onStart inside the React app folder. Once it's up and running, we can go to a localhost: 3000. Now, we should see already our React app inside here, and also our angular component which already renders just below here.
[02:30] Now, what we would like to do is to hook obviously on to that submit event our angular component here fires. Now I think in React is that right now, we cannot do something like on what you would do on by the onClick event like feedbackSubmit equals and done by basically to a local handler.
[02:52] This won't work. We have to have a workaround for this. What we have to do is, first of all to reference our feedback form component here. We can do this by using here an ref function which we have to create.
[03:08] Let me quickly create that one. We get a component here. What we do is simply set our component on to their class level here. Let me also make sure to type this correctly.
[03:21] Once we have reference that component, we can now use the componentDidMount event of the React component here. Inside here, we hook on our event handler. Now, our event handler is something like this.
[03:35] Let's call it onFeedbackSubmit. We'll get here an event object just as we did before in the static HTML file. Let's simply log that out. Got and something event.detail will contain our JSON.
[03:49] In order to hook up that event, we can now use that component variable we have to save before, use at event listener method. Use our feedbackSubmit event which will be submitted by our angular element.
[04:02] Obviously, we now need to reference this.onFeedbackSubmit function. Similarly, what you should also do is, on the component will unmount. We want to remove the event listener again something like that.
[04:17] Let's recap. What we do here is we use that ref here to basically call a function, once that component get instantiated. Then, we call a function inside our React app here. We set here a global variable to [inaudible] usually get passed.
[04:32] Then, in a componentDidMount and the component will unmount events. We've basically used that component that hook on an event listener which is our event that gets broadcast by our angular element.
[04:43] That then cause our onFeedbackSubmit event which should log out to result and the console. Let's save this. Our React app should instantiate and reload. Let's [inaudible] to console. Now, let me write something inside here and click the submit event. As you can see, we get a result and a console just as we expect.