Introduction to Angular Elements

You didn't yet get into Angular Elements? Then it's time to give it a go! In this article we're going to see what Angular Elements actually are, why they are useful and how to create our first Angular Element out of a plain component.

Egghead course: Getting Started with Angular Elements

Heads up! I've created a 40min course on Egghead.io that introduces you to Angular Elements, step by step.

Here's the intro video for the course: https://egghead.io/lessons/angular-course-intro-to-angular-elements

The course walks you through..

• Transform an Angular Component into a native Custom Element
• Compile an Angular Component as standalone Custom Element
• Use ngx-build-plus to compile Angular Elements
• Communicate with Angular Elements using Inputs and Events
• Use an Angular component inside a React App with Angular Elements
• Pass data from a React component to an Angular component with Angular Elements
• Create multiple root components in Angular with Angular Elements
• Use Angular components in AngularJS applications with Angular Elements

View the entire course here.

What are Angular Elements?

Angular Elements is the new kid on the block in the Angular ecosystem. Elements allows you to automatically convert (or wrap) every Angular Component as "Custom Element". Custom Elements are one of the specs under the umbrella term of Web Components. That opens up a loooot of new possibilities for Angular like

• dynamically instantiating components - but not with a ComponentFactoryWhatever but in the form of having it in a HTML string sent from the server for instance, a typically use case for CMS systems. It also allows us to instantiate a component using the browser native document.createElement('...') API.
• compiling Angular components as custom elements to be consumed "outside" of an Angular app. Assume you build some cool widgets you wanna reuse within your organization. But not everyone uses Angular, or even has a SPA. In such situation you can still compile your Angular component (as Angular Element) into a single JS file and use it wherever you need it
• upgrading your AngularJS app - there are different strategies available. Angular Elements are a new option to upgrade a legacy AngularJS app simply by embedding Angular Elements for certain pages/components.

Why?

Why we need Angular Elements? There are plenty of reasons and use cases:

• Implementing more dynamic Angular Applications (i.e. CMS systems)
• Embed Angular Components in non-Angular Apps (i.e. sharing between teams at big organizations)
• Enhancing existing HTML pages (not everything is & should be created as single page app)
• Upgrading from AngularJS to Angular (i.e. by embedding Angular Elements in AngularJS apps)
• Micro Frontends
• ...

Creating your first Angular Element

Head over to my blog to read the full article »