Using Angular components as web components and using in JS frameworks like React, Vue
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
Nodejs installed and angular installed in your system.
Install ag-grid refer https://www.ag-grid.com/angular-grid/getting-started/
Steps to Create a reusable web component Using angular elements
create a new angular application
install @angular/elements in this application
Create Grid component
ng g component grid
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
Create custom element reference to use this component as web component. in 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
To run this angular application 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.
Now, once you had created your angular component, and create custom Element , you need to package this. using ng build command.
you should see a dist folder is created in root of application
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
Now , copy the dist folder from the productApp to this new demo_js_app
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
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 .