Angular Elements – part 2 how to add Angular Element support to a project

Last week I introduced a new Angular 6 feature: Angular Elements. Elements are Angulars implementation of a Custom element, a standard way to embed any component in any web page.

Today I’m going to show you how to add Angular Element support to a project.

Getting Started

Let’s get started by creating and initialising a new Angular project

ng new hello-world-popup

Build the project to make sure everything is working.

cd hello-world-popup
ng build 

Install Angular Elements

To add support for Angular Elements use the Angular CLI command ng add.

ng add @angular/elements

I’ve already written about ng add but I want to explain what’s going on here. ng add is built on schematics. When you run ng add @angular/elements the CLI scans your project and updates your code to support Angular Elements. It’s automatic. There’s no manual configuration required.

In this example:

  • 2 dependencies are added to the package.json:
    • “@angular/elements”: “^6.0.1”
    • “document-register-element”: “^1.7.2”.
  • 1 script is added to the script node of the angular.json:
    • "scripts": [ { "input": "node_modules/document-register-element/build/document-register-element.js" } ]

You don’t need to understand this example. The takeaway is that everything is done automatically. Your code is updated automatically. Awesome.

Create a component

We’re ready to add a new component. This component will be our Angular Element. Let’s use the Angular CLI again:

ng generate component hello-world-popup 

Check everything is working by running a build

ng build 

Summary

Today I’ve shown you how easy it is to add Angular Element support to a project.

Next time I’ll show you how to turn our component into an Angular Element.

<< Read part 1 Read part 3 >>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.