A Practical Introduction To Web Components With Angular 6

  • 2018-05-21 03:45 AM
  • 942

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.

Learn Angular Online

Angular 6 (formerly Angular 2) - The Complete Guide

Learn and Understand AngularJS

Angular Crash Course for Busy Developers

The Complete Angular Course: Beginner to Advanced

Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

Become a JavaScript developer - Learn (React, Node,Angular)

Angular (Full App) with Angular Material, Angularfire & NgRx

The Web Developer Bootcamp