Learn how Angular Elements transmits Component’s @Outputs outside Angular

Fan of Angular-In-Depth? Support us on Twitter!

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

In our last article we described how Angular Elements works under the hood. We identified that Angular Elements is a bridge to connect Custom Elements to Angular Components. To do that:

1. Angular Elements implement Custom Elements API.
2. Angular Elements wrap an Angular Dynamic Component.

Angular Components communicate with other components through inputs and outputs. In the previous article we showed how Angular Elements use the attributeChangedCallback hook of Custom Elements to implement @Input in and receive values through the DOM elements attributes. In this article, show @Output works in Angular Elements.

Whereas Inputs rely on the Custom Elements lifecycle hook, Outputs rely on the Custom Event API (spec). Both APIs are entirely separate from each other. In this article we’ll take a look at Custom Events, learn how they are used in modern web development and inside Angular Elements.

Following the pattern from our last article, let start with vanilla HTML and JS to demonstrate the mechanics of custom events.

Vanilla Custom Events

Custom Events is pretty straight-forward. It works just like the built in events such as click, keydown, etc. In the following demo, we have a div that emits a custom event named highlight. When we click the div, it will highlight itself and fire the custom highlight event.

The high-level rundown of the steps we’ll take to implement this scenario are:

1. In a highlight() function, we’ll create a new CustomEvent named highlight, and use the standard DOM API dispatchEvent to dispatch the event.
2. Then, we’ll use addEventListener to register a listener for a click event on our App element, that will in turn call the highlight function from the previous step. Effectively, we’ll be Outputting the highlight event whenever we receive a click event.

Vanilla Angular Component with Output EventEmitter

Now let’s move on to creating an Angular component with a simple Output EventEmitter.

Angular Elements with Custom Events

In Angular Elements to transmit the @Output of the wrapped Angular Component we will use the Custom Events mechanism. This is relatively simple — we just need to subscribe to @Output of the wrapped component and dispatch a custom event.

But how do we get the list of all component outputs? Easy! We just use the component factory metadata for that. In the example below we’re using component factory to take all outputs of a component and subscribe to them to fire Custom Events. We put that logic into the connectedCallback hook that is called when the custom element is initialized and bound to the DOM:

The code above is just pseudocode to describe the idea, you can find the workable version in my sample repository in the updated sample repository, https://github.com/JiaLiPassion/custom-element, click the Element , it will change to highlighted.

Acknowledgements

Thanks Zack DeRose again for checking my story and making it easy to read! You are awesome! And thanks Max NgWizard K for the review and giving a lot of feedback!

That’s all, thank you for reading!