Today I’m starting a new series of articles about Angular Elements. But before we go any further I thought you should know that Angular 6.0.1 has been released. It contains some fixes for Angular Elements, Animations and Service Workers.

What are Angular Elements?

Angular Elements are Custom elements, a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills.

Custom Elements, let you create custom tags in a framework-agnostic way. They let you reuse your Angular components in any webpage. Yes, you can embed Angular Elements inside a React or Vue page without any knowledge of Angular.

Custom Elements remove the need to rewrite a widget everytime a new framework pops up.

There are currently hundreds of HTML date pickers (google it to see what I mean). Custom Elements allow us to write one date picker and reuse it everywhere. It doesn’t matter which library/framework is used to build it or which library/framework is used to consume it.

How do Angular Elements work?

• They are self Bootstrapping.
• They actually host the Angular Component inside a Custom Element.
• They’re a bridge between the DOM APIs and Angular Components.
• Anyone can use your component without having to know Angular.

Can you show me an example of an Angular Element?

<my-popup message="Use Angular!"></my-popup>

Summary

Angular Elements give you an easy way to implement a web standard. There is no smoke and mirrors.

Next time I’ll show you how to create your first Angular Element.