Web Components in Angular and AngularJS

Angular Elements as building blocks of modern web

During a typical developer journey, you can often end up stuck in projects filled with old technologies. You start to wonder how to convince PO, managers and even colleagues to switch to something new — everyone uses Angular 6, ReactJS or VueJS, but why can’t I?

In my post, I’ll try to show you how to easily combine old (AngularJS) and new technologies (Angular 6) while simultaneously pleasing PO/Managers/Team and satisfying your ambition to use latest technologies.

Typical reasons for not switching:

we’re experts in old technology

re-writing our whole code base is not cost-effective

the development process is established

people don’t like change

I’ll not challenge these arguments (yet), so buckle up and see the future coming!

Web Components as new building blocks

Web Components is a new buzz word in front-end development, although it’s not new technology. It gained momentum when the Angular team (Google :)) decided to make Angular Elements.

I’ll not dive into details of Web Components, because they’re well explained in official docs.

One important thing is that Web Components are in fact a bundle of 4 features:

Shadow DOM

HTML templates

HTML imports

Custom Elements

In this article, I’m covering just Custom Elements, because this is what Angular Elements are all about (now the naming makes sense — doesn’t it?:)).

Custom Elements is a key feature of the Web Components standard which allows one to create a custom HTML element which can be re-used anywhere on your page.

There are two types of custom elements:

Autonomous custom elements — this can be anything from simple HTML to Angular Components.

this can be anything from simple HTML to Angular Components. Customized built-in elements — where you can inherit from basic HTML elements like <input> or <ul> and extend their functionality.

To use a custom element, you need to register it to CustomElementRegistry, but thanks to Google engineers, we have it bundled in Angular!

Just one more thing before we move to the code — given the above fact, one might think that I should change the title of this article to “Custom Elements in Angular and AngularJS”, but in reality everybody is saying Web Components not Custom Elements…so let’s stick with that.

Angular Elements aka Custom Elements on Steroids

Angular Components glued together with Custom Elements*. *kinda like Custom Elements on steroids; designed to work outside Angular apps

I really like this quote from Pascal Precht — it’s just the pure essence of Angular Elements.

Just imagine that you write your Angular Components as you normally do, and then, using some sort of magic, you make them re-usable in non-Angular apps!

Hello-World Custom Element in Angular Elements

You can check the code on GitHub or play with it on Stackblitz.

A few important things to note here:

HelloComponent is a standard Angular Component — You don’t need to change your existing code!

You can use services, dependency injection and all other cool Angular features.

All the Elements magic is hidden in ngDoBootstrap() — You don’t need to register the element by yourself.

You can use your new Custom Element anywhere you want!

Check out that this example is not, in fact, an Angular application — we simply use the custom element on our HTML page :)

Angular Elements in the AngularJS application

This example uses the previous HelloComponent inside the AngularJS application. This way, you can combine multiple front-end technologies on one page — how cool is that?

Important things to note about Angular Elements:

you can use them anywhere you want — in the Controller template, in the Component template, etc.

the input is exposed as an attribute of the HTML element (input name in dash-separated-lowercase)

the output is dispatched as a Custom Event (event name matching output name)

You also need to remember that every instance of Angular Element is self-contained, i.e. they cannot share the state or service. Even though your components can share one Angular Service, after the transformation to Angular Element, these would be two separate instances of the service.

Summary

I hope you find this example helpful in your future endeavors as a developer. Check out the links section where you can discover more about the subject. And do watch the Pascal Precht presentation — it’s really good!

You can even use this post (or part of it) as a way to convince your Boss/Manager/PO/Colleagues that this is the time to use the latest and greatest technology in your project!

If you have any questions or would like to add something to the topic — feel free to post a comment or two.

And of course don’t forget to check out other great posts on our Pragmatists Blog!

Cheers!

Links