Front-end has changed a lot in the last decade. And web component is one, if not the, best feature now natively available on all the recent browsers.

Export your Angular component as a Web Component

submited by

Style Pass

2021-06-21 07:30:04

Front-end has changed a lot in the last decade. And web component is one, if not the, best feature now natively available on all the recent browsers. Here is a tutorial on how to export an Angular library into a web component.

We had to build a dialer for Ziwo. Ziwo is a Call Center Software and this dialer is the main front-end application to start or receive a phone call. This Dialpad is a small component (640x340) that need to be very easy to embed in any other front-end application.

We were tasked to rewrite the existing dialer which was a bit old and therefore hard to maintain. We also wanted to improve the solution for the integrations, mostly because of the following issues:

A web-component. The web-component highly reduced the stress around releasing a new version of the dialer. For our dev team, now the export as a web-component is working, they have nothing to worry about. They can work on our dialer just like it is a normal application. And for the integrators, this is what a fully working dialer looks like:

To build our web component, we came up is a simple setup: - the dialpad, built as a standard Angular library - a library wrapper, which export the dialpad library as a web component