How to create custom Angular Element
Build a gif search engine from scratch and bundle it using angular element.
Angular element allows you use angular component outside of angular app. It binds a component that can be embedded into any web app as a custom element. Custom element extends HTML by allowing to define a tag whose content is created and controlled by JavaScript.
We are going to build a GIF search engine as a custom element. This custom element can be used in any web app.
1. Installing Angular CLI 6 & initialize the project
npm install -g @angular/cli
ng new ng6-element
2. Adding Angular element
In order to use element functionality, we need to add @angular/elements as a dependency in our project.
ng add @angular/elements
3. Create a component
Let’s create a simple component. This was similar to our regular component.
ng g c gif-engine
4. CSS style using Shadow DOM
We are using ViewEncapsulation.Native
so that our all CSS files are compiled into JavaScript & bundled with component classes & template in a single file.
The component & views are similar to any other angular components.
In our gif-engine.component.ts
file
In our gif-engine.component.html
file
5. Registering component to app.module.ts
This process consists of 3 easy steps
- Adding component to
entryComponents.
This is required because ourGifEngineComponent
is not a part of any other component or root of angular application. We need to add the component inentryComponents
so that angular compiler will compile it. - We added
ngDoBootstrap
method to bootstrap the app manually. - Calling
createCustomElement
to convert our component architecture to native DOM architecture. Here we also need to specify the selector for our custom element (‘gif-engine’ in our case).
6. Remove app.component *
As we are manually bootstrapping the app so there is no longer need of our app.component
. Its not a mandatory thing. But it will reduce the app size & As we are working with custom elements it is a good practice to remove unwanted things.
7. Build application
Add <gif-engine></gif-engine>
to src/index.html and now you can debug your application by ng serve.
And you can make final production build by triggering this command.
ng build --prod --output-hashing=none
This will generate 4 different files (runtime.js
, polyfills.js
, scripts.js
and main.js
) and we want to distribute it as a single file. Let’s make it by using a node package called concat
. Trigger this command inside your project directory.
npm install --save concat
create a concat-build.js
file on your project root directory & place this code
Update package.json append this script.
"scripts" : {
"build:element": "ng build --prod --output-hashing=none && node ./concat-build.js"
}
Now you can generate your production build by running this command.
npm run build:element
Add put the above two lines of code on any web application… Done..!
Browser support for custom elements
Get the GitHub repository here
Conclusion
I am very excited about angular elements. This will open the door for many possibilities. With this developer can build single-purpose small components & can use them on any existing web application.
Want to know more about angular element..? checkout Rob’s talk at ng-conf here.