Angular Elements - A Practical Introduction To Web Components With Angular 6

With the release of Angular 6 the new Angular Elements functionality is now fully available. By using Angular Elements you can package Angular components as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

The custom elements standard is currently supported by browsers like Chrome, Opera, and Safari. To be able to use it Firefox and Edge polyfills are available. With a custom element you can extend the set of available HTML tags. The content of this tag is then controlled by JavaScript code which is included in the page.

In order to keep track of all available custom elements the browser maintains a registry in which every elements needs to be registered first. In this registry the name of the tag is mapped to the JavaScript class which controls the behavior and the output of that element.

The Angular Elements functionality is available with the package @angular/elements. This packages exposes the createCustomElement() function which can be used to create a custom element (web component) from an Angular component class. Therewith it provides a bridge from Angular component interface and change detection functionality to the build-in DOM API.

In this tutorial we'll explore the Angular Elements functionality from scratch by implementing a practical example from start to finish.
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)