Building simple custom web element using Angular(v6) element

Angular 6 has been officially out with lots of cool features. One of them is “Angular Element”. Using Angular element, you can build Angular component and export it as a custom web element. This custom web element can be used with any other web web framework like React, PHP, WordPress or even plain HTML/Javascript.

In this tutorial, we shall try to create a very simple Angular web element and use it in HTML file without any dependency on Angular.

For this tutorial, I am using Angular CLI 1.7.4 version.

Let’s get started!

Create a new Angular project

ng new ng-element-demo

Once project is created, navigate to new project directory.

Install Angular element package by running command:

npm install @angular/elements --save

This package contains a method to export Angular component as a web component.

Since custom web components concept is new, we will need to configure polyfills for our application. We can install package

npm install @webcomponents/custom-elements --save

Once it is done, go to polyfills.ts file to mention libraries we need to use custom elements.

Ready for exporting Angular component?

As we are done with package and dependencies installation, now we can jump to Angular code.

We need to tell root Angular module (app.module.ts) which component we are going to export. For that, we will need to update module code as below:

  1. Change selector property of AppComponent to greet-comp from app-root
  2. Import injector service from @angular/core and inject in AppModule’s constructor
  3. Remove AppComponent from bootstrap array property of NgModule
  4. Add AppComponent inside entryComponents array property of NgModule
  5. Create a custom element and register it using createCustomElement method. This method is being exported from @angular/elements package. Remember we have installed this package in start?

After these changes, app.module.ts should look something like below:

At this point we should be able to test our Angular element.

Open index.html file and delete all content and put only a <greet-comp></greet-comp>.

Now run ng serve --open command. We should see output of our Angular component in browser.

Generally we run ng build --prod command to build Angular application. As an output we get dist folder with few bundled JavaScript files.

For convenience sake, we want to build our Angular element as a single bundle .js file.

Let’s install a package

npm install fs-extra concat --save-dev

This package combines multiple bundle files into one.

After installation, create a build-script.js file on the same folder level as of package.json file. In this file, we shall add build and bundling instructuions as below:

Now we need to call this build-script.js file from command line. For that, we will add another command in package.json file inside script section.

We are all set to export our Angular component now. Just run command:

npm run build:elements

This shall create a folder elements in the same folder level of src. This folder shall contain ng-greet-element.js. Now we can use our Angular element just by importing this bundled JavaScript file.

Let’s create a new folder called client-website. Inside this folder, create a index.html file and copy-paste ng-greet-element.js file in this folder from elements folder.

Add a code in HTML file to use Angular element we just created by placing tag <greet-comp></greet-comp> followed by linking Angular Element’s bundle file.

Save the changes and open index.html file in browser by double click or any web server. You should see Angular element in action.

And we done! Now you can use this Angular element in React.js, PHP, Vue.js and any other web framework.

Cool, isn’t it?

Since Angular Element is fairly new, the size of bundle file is bit higher. For simple hello-world example, it takes 442 KB on my pc. As Angular’s new version comes in future, we can expect size optimization soon.

You can find complete source code for this tutorial on my GitHub repository.\

Live example of plain HTML website using Angular (v6) component can be found here:

I will try to create more examples of Angular Element soon with more features.


Cloud Solution Architect | Author | Full Stack Developer | |

Cloud Solution Architect | Author | Full Stack Developer | |