Introduction to Angular Elements
Tags: angular, webcomponents, javascript, webdev
Published: 2019-04-28 13:41:41

---
title: Introduction to Angular Elements
published: true
description: If you didn't give Angular Elements a go yet, now it would be a good moment to do so. Learn about what the new API gives you.
tags: angular, web components, javascript, webdev
cover_image: https://juristr.com/blog/assets/imgs/egghead-artwork-angular-elements.png
canonical_url: https://juristr.com/blog/2019/04/intro-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](https://egghead.io/courses/getting-started-with-angular-elements) 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](https://egghead.io/lessons/angular-transform-an-angular-component-into-a-native-custom-element)
- [Compile an Angular Component as standalone Custom Element](https://egghead.io/lessons/angular-compile-an-angular-component-as-standalone-custom-elements)
- [Use ngx-build-plus to compile Angular Elements](https://egghead.io/lessons/angular-use-ngx-build-plus-to-compile-angular-elements)
- [Communicate with Angular Elements using Inputs and Events](https://egghead.io/lessons/angular-communicate-with-angular-elements-using-inputs-and-events)
- [Use an Angular component inside a React App with Angular Elements](https://egghead.io/lessons/react-use-an-angular-component-inside-a-react-app-with-angular-elements)
- [Pass data from a React component to an Angular component with Angular Elements](https://egghead.io/lessons/react-pass-data-from-a-react-component-to-an-angular-component-with-angular-elements)
- [Create multiple root components in Angular with Angular Elements](https://egghead.io/lessons/angular-create-multiple-root-components-in-angular-with-angular-elements)
- [Use Angular components in AngularJS applications with Angular Elements](https://egghead.io/lessons/angular-use-angular-components-in-angularjs-applications-with-angular-elements)

**View the entire course [here](https://egghead.io/courses/getting-started-with-angular-elements)**.

## 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](https://github.com/angular/ngMigration-Forum/wiki/Migration-Paths-Overview). 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 &raquo;](https://juristr.com/blog/2019/04/intro-to-angular-elements/?utm_source=devto&utm_medium=crosspost)