In this article, we will create one simple angular element.
- Creating angular Project
- Adding element into project
- Deploying angular element
Let’s start..
1. Creating angular Project
Create angular project. Here i am creating project with name customer for this i have used V.S Code
2. Adding element into project
install all required files to cerate angular element
>ng add @angular/elements –project=customer
lets create our component which will display customer name and address
app.component.html
app.component.ts
now we need to add our component into module.Here instead of bootstrap:[] we are using entryComponents. use createCustomElement to register custom element with browser Custom Element Registry.
build your project. with the following command you will get new dist folder with some js files
>ng build –prod
We need some more packages to make our component work.
>npm install –save-dev concat fs-extra
create elements-build.js file to pull out all these into one file.
Now add new script to your package.json file, so it will build our component and generate file without hashed name.
“build:elements”: “ng build –prod –output-hashing none && node elements-build.js”
now build project,a fter runing this command you will get new folder it contains js file with element name
npm run build:elements
Now, create index.html file inside element folder
3. Deploying angular element
All is set for running our component we need server here i am using static server
>npm install static-server
Run static server inside your elements folder
>cd elements
>static-server
You might get following error
To solve this add following package
>npm i @webcomponents/custom-elements –save
Add script file into angular.json file
“node_modules/@webcomponents/custom-elements/src/native-shim.js”
Add following into polyfills.js
import ‘@webcomponents/custom-elements/custom-elements.min’;
Here our component is ready
Reason to Use angular element
- Making reusable component. Which can also be used in non angular platform
- It can also be used in your server side program
- We can make dynamic angular application like dynamic dashboard by creating interpreter component which will create dashboard atv runtiime by using DynamicComponentLoader
- Independent deployment
super
Very good Rohini . Keep it up.