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