Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.
We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.
Step 1: Installation
Create a new project using Angular CLI
ng new demo1
Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:
npm install @angular/elements
To work with older browsers, we need polyfill. So, let us install that also as shown below:
npm install @webcomponents/custom-elements
After installing polyfill, open polyfills.ts file and add these two entries: