How to Integrate Web Component for an Angular app

Last updated on January 9, 2021

In this week of building anything with JavaScript, I would like to write an experience of integrating web component within an angular app.

Introduction

To demonstrate this, I have developed a Toaster web component which is built with Vanilla JavaScript.

Here I share what we will have to do when integrating Toasterweb component library with Angular application step by step.

Integrating Web Component within an Angular App

• Generate an angular app either Webpackor angular-cliway

• Then the ultimate dependency we have here is to include webcomponentsjsnpm package which can be done by following way

npm i @webcomponents/webcomponentsjs

• And also install the required Toasterweb component package

npm i vj-toaster -S

• Include the webcomponents and vj-toaster library reference to the angular.jsonconfiguration file like below,

{
   "assets": [
      {
         "glob": "**/*.js",
         "input": "node_modules/@webcomponents/webcomponentsjs",
         "output": "webcomponents/"
      }
   ],
   "scripts" : [
      "node_modules/vj-toaster/dist/vj-toaster.js"
   ]
}

There you go!!