Custom Element Inter-op with Angular
NOTE: This article and the examples have been updated to use the custom elements v1. To see the differences between v0 and v1 checkout this readme.
The web development community moves at lightning speed, this often means porting your project to the newest framework every couple of years. This could mean porting Angular 1 directives to React components and maybe now React components to Angular components. I don’t know about most of you, but I am tired of rewriting custom drop-down menus.
And now, web components enter the ring. Web components are made up of 4 separate specs, custom elements, shadow DOM, HTML imports, and the template tag. For the purposes of this article we will focus specifically on custom elements.
In reality, you could write an entire application with custom elements and some sort of state manager (Redux, etc), but there are many who enjoy the out of the box functionality that comes with frameworks. So what we need now, is the ability to easily drop our custom elements into our existing applications.
Our focus here (SURPRISE) will be to create our own custom element and use it in our shiny new Angular application. Since we are using Angular as our inter-op example we will use typescript. If you want to see more about Angular check out the quick start, and for more information on type script check out the site.
First our basic “Hello World” Angular application. First we create a simple root component, a simple root module, and then bootstrap that module.
Nothing fancy here, just the basic setup. Now it is time for the good stuff. Now it is time for our custom element.
Since we are using typescript for our Angular application we will use the same for our custom element as well. You could also use ES6 or ES5 but to keep things consistent I am deciding to go with typescript. Creating the custom element is a bit more involved but nothing scary. The inline comments should provide clarity into what is happening.
The most important parts of our custom element for inter-op are our property getters/setters and our custom event (logoClicked). If those two things didn’t play nice, inter-op would be a nightmare. This custom element has a very simple render function and just re-renders the whole thing when our src property changes, but we could be clever and only update the bits that changed if we so wished.
Now we need to get our custom element into our application. We do that by importing it the same way we would any other external dependency. Now we can use our custom <app-logo> element anywhere in our app.
You will notice if you run your code now you will get an error from angular. Thankfully, Angular tells us that it it does not know about the property “src” since it does not belong to the element “app-logo”. To suppress this message we have to add one final thing to our app.module.
Adding the CUSTOM_ELEMENT_SCHEMA to this module will now allow us to use our custom element within the module.
As you can see there is nothing that differentiates this custom element from any other native element or Angular component. There is really no integration work we need to do, it is now plug and play.
You can check out a full working example here.
THATS IT! Angular let’s us use its standard syntax for interacting with our custom element. Now we have a custom UI component that doesn’t depend on Angular at all. Custom elements afford us the ability to be framework agnostic and leverage the web platform we all know and love.