"An investment in knowledge pays the best interest"

AngularJS (Angular 1.x) uses a different approach to web components than modern frameworks like React, Vue, and Angular 2+. However, you can still use web components in AngularJS by manually bootstrapping them. Let us write a web component with one property and event: <!-- my-component.html --> <template> <div> <p>My name is <strong>{{name}}</strong></p> <button @ click= "handleClick" >Click me!</button> </div> </template> <script> class MyComponent extends HTMLElement { constructor() { super (); this .attachShadow({ mode: 'open' }); this .shadowRoot.innerHTML = ` <style> /* Your component styles here */ </style> <slot></slot> ` ; this .name = '' ; } connectedCallback() { this .name = this .getAttribute( 'name' ) ||