Creating Web Components with Angular Element — Angular 11

Build framework-agnostic custom element with Angular Element through this step-by-step guide.

What and Why

If we have some React apps, some app built in Angular, and other vanilla JavaScript apps, how do we reuse the same common component in all those apps?

This is when we need a web component.

Web component follows a specification set by the W3C, which allows us to define new custom HTML elements. It is futureproofed since it can be used in any JS framework or no framework at all.

There are some great talks about web component/custom element, which I highly recommend checking out.

How do we build web components?

One of the many ways is using Angular Element. With Angular Element, we can package Angular components as web components and use them readily in React, Vue.js, and even with vanilla JavaScript.

Let’s see some coding.

Prerequisite

This assumes that you have an existing Angular 11 project with Angular CLI installed. If not, just run the following to initialize the project before adding @angular/elements.

npm i -g @angular/cli
ng new web-demo