Using Angular components as web components and using in JS frameworks like React, Vue

Lets first understand what is web components in JavaScript world.

Web Components: Custom ,reusable encapsulated HTML tags and styles used in web applications. Web components are based on main specifications Custom Element , Shadow DOM, ES module, HTML template element.

Custom Element: As I understood custom elements used for custom elements tags that can be used in any document that contain defining tags. Same like we have react or angular components , but think like without using these frameworks will have only custom html elements, and we are using this elements in any JS framework. That's sounds cool right , means write once and re use every where.

Shadow DOM: Shadow DOM is another specification for web components which mean our web component should be encapsulated , its as way to hidden separated DOM to an element.

ES Module : is a way to reuse of JS documents in a standards based, modular, performance way. Modules let you provide to encapsulated your JS code as libraries.

HTML Template: Html template is used for holding html content fragment that can be render immediately when page is loaded.

So this is basic understand of web component specifications for better refer below articles.

So Now we will try to use Angular elements as a web component , and reusing in React ,Vue, and simple JS UI.

Web component using Angular elements

Angular elements are packaged as custom elements which used as a web components. Means we can reuse and share our custom components to other projects which may or may not be develop in angular.

So what exactly is Angular elements, its bridge between angular components and custom elements. Using angular elements custom elements are act as host for angular components.

The @angular/elements packages exports createCustomElement() API that provides a bridge from Angular component interface and change detection functionality to the built in DOM API.

Lets start to create an Angular web component, In this story I will show you how I had learned to using angular component as a Web component. I had created a grid component via ag-grid with some data populated

pre-requisites:

Nodejs installed and angular installed in your system.

Install ag-grid refer https://www.ag-grid.com/angular-grid/getting-started/

create a new angular application

Create new product app

install @angular/elements in this application

Create Grid component

ng g component grid

Grid component code
Grid component code

grid.component.html

grid component template

lets add some data in grid using a service call.

Create an angular service

ng g service girddata for example

it will create GriddataService , using httpClientModule I had call the respective service

In app.component.ts

Create custom element reference to use this component as web component. in app.component.ts

app.component.ts

Till now we have created a simple angular app which have grid component with some data.

In app.component.html use the app-grid component

app.component.html

To run this angular application using ng command

run the angular app using ng command

go to http://localhost:4200 default port of angular, you can add different port using — port option

you should able to see the following grid component.

Angular app in browser which have grid component

Now, once you had created your angular component, and create custom Element , you need to package this. using ng build command.

Using ng build to package the angular app in a dist

you should see a dist folder is created in root of application

example of dist folder

So , far we have created a simple angular component with grid ,lets use this grid component in a JS UI code without using angular project

create a demo_app using npm init

package.json of demo_app

Now , copy the dist folder from the productApp to this new demo_js_app

Structure of demo_app

Now build this dist component js files into a single JavaScript file using this given build-component.js

This part of code will build the js files in to single grid-widget.js

Note: Normally when use artifcatory , we are using distribution from the artifcatory, then you don’t to copy this productApp, you could bundle in npm registry and fetch the productApp module as a npm module.

Once grid-widget.js is created, you can now use the angular component as a web component in Index.html add the grid-widget.js in script tag. also add the respective styles. here is the sample code

npm install -g serve

Then run serve. You should able to see below

Now , if you go to http://localhost:5000/

you should able to get the grid display in your JS UI

Grid as a Web component in simple JS UI

Cool so far, We have learn to add this angular web component in a simple JS UI app, next we will be re-using this in React application. I will post this in next story, so keep reading .

Reference links

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_element

software developer ,tech lover, reading and sharing new tech stuffs, passionate about my work, mostly I work on JavaScript, Angular, React JS,