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

1. Adding component to entryComponents. This is required because our GifEngineComponent is not a part of any other component or root of angular application. We need to add the component in entryComponents so that angular compiler will compile it.
2. We added ngDoBootstrap method to bootstrap the app manually.
3. 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..!

Our app will look like this after the build.

Browser support for custom elements

Browser support when this article is written. Check https://angular.io/guide/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.