Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Angular elements are one of the major innovations in Angular 6+. Elements allow us to develop Angular components like we always have through Angular’s powerful API, and then compile them into browser-native custom elements. With custom elements, we can define new HTML elements in a framework-agnostic way that adheres to web standards. We can also extend the HTML by defining a tag whose content is created and controlled by JavaScript code.

In this course, we’ll look at how to leverage Angular elements within our Angular apps to make them even more dynamic — a use case that’s commonly required in CMS-like environments. Going a step further, we’ll also see how we can compile our Angular elements into a standalone script file, which you can integrate into any other web context to pass data and register events on your custom elements.

Thanks for joining us!

Maxime Bourgeois

Hi, here's a short intro to my course about Angular Elements.

The goal of this course is to learn about the new Angular Elements API provided by the Angular team. It's a pretty exciting new technology as it allows us to share our Angular components outside of Angular. This opens up a lot of new possibilities, such as fully dynamic components or even including your Angular Elements in applications built with other frameworks such as React or Vue.

So in this course we'll walk through the basics, how to create an Angular Element, compile it and how to handle input and outputs. We'll also experiment with including it in a React application, or even use it in an AngularJS (v1.x) app.

This is just the beginning as the Angular Elements API is still in its very early stages. I expect a lot of new features coming up with the next major versions of Angular.

Enjoy the course

Course Intro to Angular Elements

[Dynamic components](https://egghead.io/courses/create-dynamic-components-in-angular) aren’t always that easy, especially if you’d like to retrieve and instantiate them as part of an HTML coming from the server API. In this lesson we’re going to transform an Angular component into an Angular Element and dynamically insert it into the HTML by using the `innerHTML` property of a DOM element.

Note, if you get an error "Failed to construct 'HTMLElement': Please use the 'new' operator..", make sure to install the `@webcomponents/webcomponentsjs` polyfill and add the following `'@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';` at the end of `polyfills.ts`. I discuss this as well in the lesson.

Also check out [this GitHub issue for more infos](https://github.com/angular/angular/issues/24556).

Transform an Angular Component into a native Custom Element

Angular Elements are fully valid Custom Elements. As such, compiling them into standalone script files which can then be included as part static HTML files, even other apps using different frontend frameworks, makes it a powerful toolkit. In this lesson we’re going to explore how we can adjust the CLI compilation process to export our Angular Element into a standalone script file.

Compile an Angular Component as standalone Custom Elements

In this lesson we’re taking a look at ngx-build-plus, an open source extension of the Angular CLI that allows to tweak it’s build process with the purpose of being able to compile Angular Elements more easily.

Check out the [ngx-build-plus repository](https://github.com/manfredsteyer/ngx-build-plus) for more options.

Use ngx-build-plus to compile Angular Elements

In a real world scenario we obviously need to be able to communicate with an Angular Element embedded into our static HTML site. In this lesson we will learn how we can pass data into a Custom Element and how we can register to an Angular Element’s output in the form of custom events.

Communicate with Angular Elements using Inputs and Events

You have different teams, using different frontend technologies, but you still want to share components? In this lesson we'll learn how to leverage Angular elements to compile an Angular material form component to a reusable "custom element" and include it in an existing React app.

Use an Angular component inside a React App with Angular Elements

When you embed an Angular component inside a React app, you don't just want to listen to its output events, but also to be able to input data into the component. In this lesson we will take a look how to achieve this with Angular elements. We will also learn about some shortcomings when working with custom elements and React components.

Pass data from a React component to an Angular component with Angular Elements

The main use case for compiling Angular Components into standalone Angular Elements and bundle them into a single JS file, is to use them within other environments. Such might include server side CMS systems or micro frontends. In such scenarios, an Angular Element or web component should be isolated, fulfil a single functionality and communicate with the outside world using inputs & outputs.
You can however also compile multiple Angular Elements out of a single Angular app, use them separately inside some `index.html` file and even have them share the state over Angular services! Let's learn how!

Create multiple root components in Angular with Angular Elements

When migrating AngularJS (v1.x) applications to Angular you [have different options](https://github.com/angular/ngMigration-Forum/wiki/Migration-Paths-Overview). Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Getting Started with Angular Elements

Juri Strumpflohner

Credits

Course Content