Course Intro to Angular Elements

Transform an Angular Component into a native Custom Element

Compile an Angular Component as standalone Custom Elements

Use ngx-build-plus to compile Angular Elements

Communicate with Angular Elements using Inputs and Events

Use an Angular component inside a React App with Angular Elements

Pass data from a React component to an Angular component with Angular Elements

Create multiple root components in Angular with Angular Elements

Use Angular components in AngularJS applications with Angular Elements

Getting Started with Angular Elements

When you embed an Angular component inside a React app, you don't just want to listen to its output events, but also to be able to input data into the component. In this lesson we will take a look how to achieve this with Angular elements. We will also learn about some shortcomings when working with custom elements and React components.

Instructor: [00:00] Similarly, as we here would copy an event listener to listen for an output of our feedback form event, which is our Angular element, we would obviously also like to pass in some input. Basically, I would like to set, for instance, a default of the name of my user such as it is already prefilled.

[00:18] First of all, let's jump back to our Angular element. I've adjusted it already properly, such that it takes an input name here, and that input name already gets bind to the form. If we now compile that to our Angular element, that should have been copied over already to our demo folder.

[00:42] We could try it out here on our plain Web component. Pass in Uri, for instance, save it, go to our app here, and refresh. We can see that the name gets displayed in there properly.

[00:55] Let's copy over the new build of our ng-elements to our React app and do the same. I go again to the public folder here. I delete the old one. Let me copy in the new one. Now we should be able to go our app.js file here and just pass in the name Uri again. Let's switch over to the React app, refreshes, and now we can see it gets prefilled here as well.

[01:24] Obviously, what we can also do is to reference this from a variable. Let's say I have here a variable inside my React component which says Uri. I can go down here and simply bind it to this.name, and that would work the same way.

[01:39] There's one issue, however. If you don't pass in just a simple value, such as a string or number, but assume we have here something like a person object, then the binding won't work anymore. What React does is to serialize this with a toString, and so we would get just object, object, inside our component.

[02:00] We can prove that by going to our feedback component. I'm going inside here. Let's write something like that, do this.name, and print it out. We need to recompile our Angular element. Afterwards, let's copy it over to our React folder. Let's refresh here the application.

[02:24] What you can see now here is input that we get printed out is basically the serialization of the toString of our object. We don't get a serialized JSON object here, but rather just a toString representation. That adds some overhead to when we work with Web components here in React or when we wanted to work with Angular elements inside there.

[02:43] We would have basically to do a JSON serialize before, and then, inside our Angular element, to deserialize the JSON again to pass in complex objects.

Course

Getting Started with Angular Elements

Pass data from a React component to an Angular component with Angular Elements

Share this video with your friends