Web-components in angular using angular elements
Hi Friends,
In this section, we are going to talk about angular elements. Angular elements is extremely helpful in building cross framework components. Consider a case where you are writing any shared library in angular and you would like to use the same in react. Initially, cross framework communication was pain. But with the introduction of angular elements, its fairly simple and easily achievable. In a nutshell it means something like
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.
Now, without wasting time let’s get started. First of all we need to create a new project in angular 6 say ng new ng-elements. Then we will execute npm i @angular/elements — save. After that we will execute npm i @webcomponents/custom-elements — save. This will install required polyfills for cross browser compatability. Once the same get added, then will create our first component. say ng g c greeteer. We use ViewEncapsulation.Native, so that the styles get bundled with the template and the component’s class into one file. This will help while consuming the same in different framework. After executing this, now my greeter component looks like
Next thing is registering the component in app.module.ts. Now, this is the important thing.Here, we use Angular’s createCustomElement function to create a class that can be used with browsers’ native customElements.define functionality. Basically createCustomElement, encapsulates the functionality and makes it usable outside angular environment. Below is the snippet of my app.module.ts. Now, at this moment, I don’t need <app-root> to bootstrap our angular app in index.html. Basically, I can delete this entirely, and I can have something like
<app-greeter></app-greeter>
in html file.
Having said that when I do ng serve now, this will come something like
Next thing which is required here, is to use the same in some other app. Let’s do that now. So, first of all, I’ll build the app without hashing like
“build”: “ng build — prod — output-hashing none”
Upon successful running build, it will come something like this.
At this point, my dist folder looks like
Now, at this moment, I can take these scripts and use in any other app, but that time, I will have to resolve it sequentially. It would be better, if we only fix this issue by bundling into one single js file. For that, I will install two different utilities like shown below.
npm i fs-extra concat — save-dev
Once this is installed, I will create one script file for concatenating and bundling the same in one file. Below is the snippet for the same.
After executing this command successfully, it will create one new file with the name ng-elements.js inside elements folder. Now, my npm scripts looks like this.
Therefore, when I run “npm run build:elements”, it will produce following output.
This will create one new folder like
Now, I can go ahead and consume this script in any app. Let’s create one angular js app like shown below.
Let’s have a look at index.html file here.
Now, here first part is just some angular js normal data binding. Second part you can see that I used my custom tag “<app-greeter></app-greeter>”. At this point, when I open the html file in browser, it will come like
As you can see, first part is angular js component and 2nd part is angular component. Now, if you inspect this angular component in developer tool, you will see something like below
As you can see here, styles get encapsulated into component itself which is nice. And its also reflecting current ng-version of this component as well. Completed code of angular elements you can find here https://github.com/rahulsahay19/ng-elements.
Originally published at My View.
