Web Components with angular

Create Stander Web Components using angular elements

Before we start

What is Web Component ?

What make a web component ?

Why web component ?

  • Reusability
  • Maintainability
  • Productivity
  • Composability
  • Following web standard

Angular <Angular-Element>

Angular Element Logo

What are Angular Elements?


  • Angular CLI (version 6 or higher)
  • NPM (version 5 or higher)
  • Node (version 10.8.0 or higher)

1. Setup Your Angular Project.

$ ng new card-element$ ng add @angular/elements — project=card-element
$ npm i @webcomponents/custom-elements --save
import "@webcomponents/custom-elements/src/native-shim";import "@webcomponents/custom-elements/custom-elements.min";

2. Create New Component

$ ng g c ng-card-element -v Native
  • Input will named in kebab-case for example (post-image instead of postImage)
  • Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name.

3. Update NgModule

$ ng serve

4. Package Your Angular Element

$ ng build --prod
npm install --save-dev concat fs-extra
"build:elements": "ng build --output-hashing none && node build-elements.js"

Use Your Angular Element

Final Word

Need More

  1. Elements in v6 and Beyond — Rob Wormaldng-conf
  2. https://www.youtube.com/watch?v=y73NMviRoPY ( Angular Elements Introduction & Walkthrough — by Academind on youtube )
  3. https://www.youtube.com/watch?v=4u9_kdkvTsc ( Angular Elements Quick Start — by Angular Firebase on youtube )



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store