Communicate with Angular Elements using Inputs and Events
In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s output in the form of custom events.
Instructor: [00:00] When you compile an Angular component, such as a reader component, into a web component, in a real world scenario, you obviously want to input some data and output some data from it. Let's quickly take a look how that would work.
[00:12] From an Angular perspective, inputs are managed by that input decorator. Let's say, for instance, we get here an input name. We need to import that. We could say hi and name that gets passed to our component here. So far, that works perfectly.
[00:28] Now, let's do the build compilation of our web component again. You can already see that it reflects your change. We could go over to our index HTML page and say something like that, name Yuri. When I save this, you can see how it perfectly works.
[00:47] We can just pass it in via that name property here. Similarly, we can do this for the events. Here in the component, this is a normal output mapping. Let's call it greet, which is a new event emitter. You obviously need to import that event emitter here from Angular core.
[01:07] In order to be able to trigger it, let's here add a button with the click event, doGreet. We also need to implement that accordingly in our component, where we simply then emit on our event emitter. We say here emit hi, this.name.
[01:28] Great. We can now recompile our component, always using our script. Once that compilation finishes, we can again go to our index HTML file, and now react to that event.
[01:42] Now, events are simply handled as you would normally do with DOM Elements. First of all, we need to grab an instance here of our DOM element. We use here the [inaudible] selector API of the browser, and we get here our doGreet.
[01:55] Not add element, we say add event listener. We need to listen to our greet event, which is a custom event we just defined. We will here get the event object. First of all, let's simply log that out to the console to see what it looks like.
[02:11] Let's go here to the console and click the greet button. You can see here, we get an instance of such a custom event. If you want to get the detail which we pass, it's directly inside that detail property. Here, we can see hi Yuri, which was the object which was triggered from the inside.
[02:27] Here, we could simply say something like alert eve.detail. If you click, you can see how the message pops up directly. In this way, you can see how we can define inputs and outputs via those events.
[02:41] Obviously, we could also specify the input directly here over at programmatic API. You see that will work as well.