Angular Element

Angular logo

In this article, we will create one simple angular element.

  1. Creating angular Project
  2. Adding element into project
  3. 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

Please follow and like us:
Sending
User Review
5 (2 votes)

2 Replies to “Angular Element”

Leave a Reply

Your email address will not be published. Required fields are marked *