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.
| Read part 2 >> |
Upgrade to Angular is a daily bite-size newsletter containing Angular news, analysis and advice by Darryl Brown.