{"id":2939,"date":"2019-09-27T15:50:00","date_gmt":"2019-09-27T15:50:00","guid":{"rendered":"https:\/\/contentlab.com\/using-web-components-in-angular\/"},"modified":"2021-11-29T19:31:40","modified_gmt":"2021-11-29T19:31:40","slug":"using-web-components-in-angular","status":"publish","type":"post","link":"https:\/\/contentlab.com\/using-web-components-in-angular\/","title":{"rendered":"Using Web Components in Angular"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2939\" class=\"elementor elementor-2939\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-590cb0c elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"590cb0c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-28c84d24\" data-id=\"28c84d24\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-409702e elementor-widget elementor-widget-text-editor\" data-id=\"409702e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<h2 id=\"the-history-of-components-in-web-development\">The History of Components in Web Development<\/h2><p>If you\u2019re a JavaScript developer, you\u2019ve probably heard of Web Components. In case you\u2019re not familiar with them, Web Components make it possible to define custom HTML components using JavaScript. Have you ever wanted to create a\u00a0<code>&lt;my-cat \/&gt;<\/code>\u00a0tag that will wrap its contents with a border of animated dancing cats? With Web Components, you can (and it\u2019ll work in any browser) whether or not you\u2019re using a framework.<\/p><p>The idea of component-based web development isn\u2019t new. It\u2019s been around nearly as long as the web. It\u2019s an alluring proposition; instead of generating bespoke HTML for every site you generate, components offer the opportunity to create reusable building blocks.<\/p><p>The first widespread use of components to build web apps was NeXT Software\u2019s WebObjects, which appeared in 1996. A few years later, both JavaServer Faces and ASP.NET Web Forms hit the market. Although all of these frameworks generated HTML server-side and sent it to the browser, users of modern front-end frameworks would find the concepts in WebObjects, JSF, and Web Forms very familiar.<\/p><p>Eventually, as browsers evolved and JavaScript engines became more capable, developers started experimenting with the creation of single-page applications (SPA). Instead of generating HTML server-side, developers started to generate its client-side, in the browser. One of the first component-based client-side frameworks to appear was the Google Web Toolkit (usually just called GWT) in 2006. GWT was a couple of things in one: it was a component-based framework and was also a Java-to-JavaScript compiler.<\/p><p>In 2010, more popular component frameworks appeared: BackboneJS and KnockoutJS. Unlike GWT, these were pure JavaScript frameworks. In 2012, AngularJS appeared, and this is when the popularity of client-side component frameworks accelerated. Within a couple of years, React and Vue showed up, and for many web developers, a component-based SPA became the default way of developing new web apps.<\/p><p>All of these client-side frameworks have a drawback \u2014 components created in one framework can\u2019t be used easily in another framework. In many cases, this isn\u2019t a problem; a company that settles on a framework usually uses that framework for all of its applications. But for companies, open-source projects, and individuals who want to create reusable front-end component libraries, the wide variety of popular frameworks presents a challenge: how do you make components that anyone can use without duplicating your work for every framework you want to support?<\/p><p>Web Components offer a solution. They\u2019re a browser-native way to define custom HTML elements that can be used in any framework, or even without any front-end framework at all. We\u2019ll be exploring how to use Web Components in Angular 8. To begin, we\u2019ll walk through the creation of a couple of simple Web Components.<\/p><h3 id=\"prerequisites\">Prerequisites<\/h3><p>The rest of this article assumes you\u2019re familiar with modern Angular development. We\u2019ll be using<br \/><a href=\"https:\/\/angular.io\/\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 8<\/a>, but if you\u2019re familiar with Angular 4+, you\u2019ll have no trouble following along.<\/p><p>We also assume you\u2019re familiar with how Web Components work. Although we\u2019ll be creating our very own web components to use in an Angular app, we\u2019re not going to have time to do a deep-dive into Web Components before we start.<\/p><p>Fortunately, the<br \/><a href=\"https:\/\/www.webcomponents.org\/specs\" target=\"_blank\" rel=\"noopener noreferrer\">Web Components specification site<\/a>\u00a0provides a great introduction to the basics of creating and using Web Components. Unlike most software specs, this one is easy to follow; it explains everything in plain English and includes plenty of code samples.<\/p><h3 id=\"creating-web-components\">Creating Web Components<\/h3><p>Before we can put Web Components into our Angular app, we\u2019ll need some Web Components to use. We could import something from an existing component library, but where&#8217;s the fun in that?<\/p><p>We\u2019re going to create two simple counter components. One will be an imperative component. This component will have an object-oriented API that we\u2019ll have to call to increment or decrement a counter.<\/p><p>The second component will be a declarative counter component. This component has its count value passed in via an attribute. It relies on this external value and can&#8217;t increment or decrement its value. While this might sound useless, declarative components are common in cases where a component is only responsible for displaying data passed to it. The\u00a0<a href=\"https:\/\/demos.wijmo.com\/5\/Angular\/GaugeIntro\/GaugeIntro\/\">Wijmo Gauge<\/a>\u00a0is a good example of this type of component.<\/p><p>Now let\u2019s dive into our custom component code.<\/p><p>To make this exercise easy to follow, we\u2019ve put all the code into\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/web-components-in-angular\" target=\"_blank\" rel=\"noopener noreferrer\">a StackBlitz<\/a>\u00a0so you can view and run it from your web browser.<\/p><p>To get started, let\u2019s take a look at the\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/web-components-in-angular?file=src\/app\/web-components\/ImperativeCounter.ts\" target=\"_blank\" rel=\"noopener noreferrer\">ImperativeCounter.ts file<\/a>, located in the src\/app\/web-components folder.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0443cb9 elementor-widget elementor-widget-code-highlight\" data-id=\"0443cb9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>class ImperativeCounter extends HTMLElement {  \r\n  private readonly shadow: ShadowRoot;  \r\n  private currentCount: number = 0;  \r\n\r\n  constructor() {  \r\n    super();  \r\n    this.shadow = this.attachShadow({ mode: 'open'});  \r\n    this.update();  \r\n  }\r\n\r\n  update() {  \r\n    const template = `  \r\n      <style>  \r\n        .counter {  \r\n          font-size: 25px;  \r\n        }  \r\n      <\/style>  \r\n      <div class=\"counter\">  \r\n        <b>Count:<\/b> ${this.currentCount}  \r\n      <\/div>  \r\n    `;  \r\n    this.shadow.innerHTML = template;  \r\n  }\r\n\r\n  increment(){  \r\n    this.currentCount++;  \r\n    this.update();  \r\n  }\r\n\r\n  decrement() {  \r\n    this.currentCount--;  \r\n    this.update();  \r\n  }  \r\n}\r\n\r\nwindow.customElements.define('i-counter', ImperativeCounter);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1400a1 elementor-widget elementor-widget-text-editor\" data-id=\"a1400a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Like all Web Components, this one starts by extending HTMLElement. We must do this, or else the browser won\u2019t let us register the component.<\/p><p>Next, we create two instance variables: shadow, which holds the Web Component\u2019s shadow DOM, and\u00a0<code>currentCount,<\/code>\u00a0which stores the current value of our counter.<\/p><p>Then, our constructor creates the shadow DOM and stores it in shadow. The constructor finishes up by calling the update method.<\/p><p>In update, we define an HTML template for our element that includes the value of\u00a0<code>currentCount<\/code>. We then assign our template string to our shadow DOM\u2019s\u00a0<code>innerHTML<\/code>\u00a0property.<\/p><p>Our imperative counter class finishes up by defining its increment and decrement methods. These methods simply increase or decrease the value of\u00a0<code>currentCount,<\/code>\u00a0and then call update to ensure that we show the new value of\u00a0<code>currentCount<\/code>\u00a0in our component\u2019s HTML.<\/p><p>Outside the class declaration, we call window.customElements.define to register our shiny new component with the browser. Without this step, nobody would be able to use our counter component.<\/p><p>Now, let\u2019s take a look at the declarative counter component. Notice that it\u2019s similar to the imperative counter:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78c7d12 elementor-widget elementor-widget-code-highlight\" data-id=\"78c7d12\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>class DeclarativeCounter extends HTMLElement {  \r\n  private readonly shadow: ShadowRoot;  \r\n  private currentCount: number = 0;\r\n\r\n  constructor() {  \r\n    super();  \r\n    this.shadow = this.attachShadow({ mode: 'open'});  \r\n  }  \r\n\r\n  static get observedAttributes() {  \r\n      return ['count']  \r\n  }\r\n\r\n  connectedCallback() {  \r\n      this.currentCount = parseInt(this.getAttribute('count')) || 0;  \r\n      this.update();  \r\n  }\r\n\r\n  attributeChangedCallback(attrName, oldVal, newVal) {  \r\n      this.currentCount = newVal;  \r\n      this.update();  \r\n  }\r\n\r\n  update() {  \r\n    const template = `  \r\n      <style>  \r\n        .counter {  \r\n          font-size: 25px;  \r\n        }  \r\n      <\/style>  \r\n      <div class=\"counter\">  \r\n        <b>Count:<\/b> ${this.currentCount}  \r\n    `;  \r\n    this.shadow.innerHTML = template;  \r\n  }  \r\n}\r\n\r\nwindow.customElements.define('d-counter', DeclarativeCounter);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f453659 elementor-widget elementor-widget-text-editor\" data-id=\"f453659\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Just as in the imperative counter, we&#8217;ll start by defining instance variables for our shadow DOM root and the counter\u2019s current count value.<\/p><p>The constructor is similar, but we don\u2019t call the update method. We want to wait and see if a value was passed into the component via the count attribute. This value won\u2019t be available at the time the component\u2019s constructor is called. Instead, we use a Web Component lifecycle method:\u00a0<code>connectedCallback<\/code>.<\/p><p>This method gets called after a component has been inserted in the DOM. If we look in our component\u2019s\u00a0<code>connectedCallback<\/code>\u00a0method, we\u2019ll see that it reads the value of the component\u2019s count attribute and uses it to set the value of currentCount. It then calls update to render the component.<\/p><p>Looking through the component, we\u2019ll see two more things that differ from the imperative counter: a static property named\u00a0<code>observedAttributes<\/code>, and an\u00a0<code>attributeChangedCallback<\/code>\u00a0method. These are both parts of the Web Components API.<\/p><p><code>observedAttributes<\/code>\u00a0provides the browser a list of attribute names for which the component would like to receive a notification when they change. This is helpful because end-users of the component could add as many attributes to it as they want to, and it would be a waste of resources for the browser to send the component change notifications it isn\u2019t going to use.<\/p><p>The\u00a0<code>attributeChangedCallback<\/code>\u00a0method is called by the browser whenever one of the attributes listed in\u00a0<code>attributeChangedCallback<\/code>\u00a0changes. In our case, count is the only attribute we\u2019ll receive notifications for. So, when the method is called, we update\u00a0<code>currentCount<\/code>\u00a0with the new value and then call update to re-render the component.<\/p><h3 id=\"using-web-components-in-angular\">Using Web Components in Angular<\/h3><p>Now that we\u2019ve created our components, it\u2019s time to use them in Angular. After all the work we\u2019ve done so far, using our Web Components in\u00a0<a href=\"https:\/\/contentlab.com\/paleolithic-javascript-sproutcore-2\/\">Angular<\/a>\u00a0will be so easy, it\u2019s going to seem anti-climactic!<\/p><p>In the StackBlitz project, open up app.module.ts. You\u2019ll see the following:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0eb45a0 elementor-widget elementor-widget-code-highlight\" data-id=\"0eb45a0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core';  \r\nimport { BrowserModule } from '@angular\/platform-browser';  \r\nimport { FormsModule } from '@angular\/forms';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n@NgModule({  \r\n  imports:      [ BrowserModule, FormsModule ],  \r\n  declarations: [ AppComponent ],  \r\n  bootstrap:    [ AppComponent ],  \r\n  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]  \r\n})  \r\nexport class AppModule { }<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee26db9 elementor-widget elementor-widget-text-editor\" data-id=\"ee26db9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Overall, this is very similar to a bare-bones app module that Angular CLI would generate for you. There are a couple of important differences, though, so let\u2019s examine those.<\/p><p>The first thing to note is that we\u2019re importing CUSTOM_ELEMENTS_SCHEMA from @angular\/core. Angular uses schemas to determine what element names are allowed inside a module. Importing the custom elements schema is necessary because, without it, the Angular template compiler will report an error when it encounters an element name it doesn\u2019t understand.<\/p><p>Also, notice that we\u2019ve added a schemas property to the NgModule decorator to tell Angular to use the custom elements schema in our app module.<\/p><p>Next, look in<br \/><a href=\"https:\/\/stackblitz.com\/edit\/web-components-in-angular?file=src%2Fmain.ts\" target=\"_blank\" rel=\"noopener noreferrer\">main.ts<\/a>\u00a0and note that we\u2019ve added two imports:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-033f333 elementor-widget elementor-widget-code-highlight\" data-id=\"033f333\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import \".\/app\/web-components\/ImperativeCounter.ts\";  \r\nimport \".\/app\/web-components\/DeclarativeCounter.ts\";<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-689e67c elementor-widget elementor-widget-text-editor\" data-id=\"689e67c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>These lines import the counter components we created and registers them with the browser. This step is important because, without it, we wouldn\u2019t be able to use the components in our Angular app!<\/p><p>Let\u2019s take a look in app.component.html to see how our Web Components are used:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b2cebd elementor-widget elementor-widget-code-highlight\" data-id=\"3b2cebd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><h5>Imperative Counter<\/h5>  \r\n<div class=\"counter-box\">  \r\n  <i-counter #iCounter><\/i-counter>  \r\n<\/div>  \r\n<h5>Declarative Counter<\/h5>  \r\n<div class=\"counter-box\">  \r\n  <d-counter [count]=\"count\" #dCounter><\/d-counter>  \r\n<\/div>  \r\n<button (click)=\"increment()\" class=\"btn btn-primary\">Increment<\/button>  \r\n<button (click)=\"decrement()\"class=\"btn btn-primary\">Decrement<\/button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86384c6 elementor-widget elementor-widget-text-editor\" data-id=\"86384c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As you can see, we render our Web Components using the tag names we registered with the browser:\u00a0<code>i-counter<\/code>\u00a0and\u00a0<code>d-counter<\/code>. For the declarative counter, we also bind its initial count attribute to the value of our component\u2019s count variable.<\/p><p>You\u2019ll see that we\u2019ve also added something extra to our components:\u00a0<code>#iCounter<\/code>\u00a0and\u00a0<code>#dCounter<\/code>.<\/p><p>As we\u2019ll see in a moment, these tags allow our Angular component to obtain direct references to these elements so we can update them.<\/p><p>Finally, we have increment and decrement buttons that call methods in the app component to change the value of our Web Component counters.<\/p><p>Now, let\u2019s move on to look at\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/web-components-in-angular?file=src%2Fapp%2Fapp.component.ts\" target=\"_blank\" rel=\"noopener noreferrer\">app.component.ts<\/a>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e29c90 elementor-widget elementor-widget-code-highlight\" data-id=\"0e29c90\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { Component, ElementRef, ViewChild  } from '@angular\/core';\r\n\r\n@Component({  \r\n  selector: 'my-app',  \r\n  templateUrl: '.\/app.component.html',  \r\n  styleUrls: [ '.\/app.component.css' ]  \r\n})  \r\nexport class AppComponent  {  \r\n  private count: number = 0;  \r\n  @ViewChild(\"iCounter\") iCounter: ElementRef;  \r\n  @ViewChild(\"dCounter\") dCounter: ElementRef;\r\n\r\n  increment() {  \r\n    this.count++;  \r\n    this.iCounter.nativeElement.increment();  \r\n    this.dCounter.nativeElement.setAttribute(\"count\", this.count);  \r\n  }\r\n\r\n  decrement() {  \r\n    this.count--;  \r\n    this.iCounter.nativeElement.decrement();  \r\n    this.dCounter.nativeElement.setAttribute(\"count\", this.count);  \r\n  }  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3071166d elementor-widget elementor-widget-text-editor\" data-id=\"3071166d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p id=\"the-history-of-components-in-web-development\">\u00a0<\/p><p>We start by importing <code>Component,<\/code> <code>ElementRef<\/code>, and <code>ViewChild<\/code> from @angular\/core. We need <code>ElementRef<\/code> and <code>ViewChild<\/code> because we\u2019ll need to manipulate our Web Components directly to change their values. Although this is a bit more awkward than working with native Angular components, it\u2019s easy to do.<\/p><p>Inside the class, we add an instance variable to store our current counter value; then we use the ViewChild decorator to acquire ElementRefs to our two web components by using the tags we just saw in the template. <code>ElementRef<\/code> instances make it possible to use underlying native elements directly. In our case, these elements are DOM nodes.<\/p><p>Next, we have increment and decrement methods. This is where the magic happens. In both methods, we change the component\u2019s count variable, and then update our Web Components to use the new value. In the case of the imperative counter, we call its increment and decrement methods. For the declarative counter, we use the DOM\u2019s <code>setAttribute<\/code> method to update the counter\u2019s value.<\/p><p>That\u2019s all there is! We have a fully functioning <a href=\"https:\/\/contentlab.com\/paleolithic-javascript-sproutcore-2\/\">Angular<\/a> app, using our hand-crafted Web Components. You can see the final result in action <a href=\"https:\/\/web-components-in-angular.stackblitz.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p><h3 id=\"using-web-components-in-angular-apps\">Using Web Components in Angular Apps<\/h3><p>And with that, we\u2019ve completed our tour of Web Components and how to use them in an Angular app.<\/p><p>Now, you can add mix Web Components into all of your Angular applications, and your users will love you even more than they do already! You\u2019re no longer limited to using Angular components in your apps. Although Angular Material is great, you might find that one of Google\u2019s <a href=\"https:\/\/material-components.github.io\/material-components-web-components\/demos\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Material Web Components<\/a> is a better fit for your app.<\/p><p>GrapeCity has a complete set of <a href=\"\/wijmo\">JavaScript UI components<\/a> and powerful <a href=\"\/spreadjs\">Excel-like JavaScript spreadsheet components<\/a>. We have deep support for <a href=\"\/angular\">Angular<\/a> (as well as React and Vue) and are dedicated to extending our components for use in modern JavaScript frameworks.<\/p><p>Here&#8217;s a look at several of our <a href=\"https:\/\/www.grapecity.com\/wijmo\/demos\/Grid\/Overview\/angular\">Angular demos<\/a>.<\/p><p><em>This blog was originally posted on <a href=\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular\">GrapeCity&#8217;s blog<\/a><\/em>.<\/p><p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article we do a tour of Web Components and how to use them in an Angular app.<\/p>\n","protected":false},"author":3,"featured_media":4881,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[268],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Web Components in Angular &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Web Components in Angular &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we do a tour of Web Components and how to use them in an Angular app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-27T15:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-29T19:31:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-in-angular\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Using Web Components in Angular\",\"datePublished\":\"2019-09-27T15:50:00+00:00\",\"dateModified\":\"2021-11-29T19:31:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-in-angular\/\"},\"wordCount\":1939,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/using-web-components-in-angular\/\",\"url\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular\",\"name\":\"Using Web Components in Angular &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png\",\"datePublished\":\"2019-09-27T15:50:00+00:00\",\"dateModified\":\"2021-11-29T19:31:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Web Components in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Web Components in Angular &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular","og_locale":"en_US","og_type":"article","og_title":"Using Web Components in Angular &#183; Technical Content Marketing | ContentLab","og_description":"In this article we do a tour of Web Components and how to use them in an Angular app.","og_url":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-09-27T15:50:00+00:00","article_modified_time":"2021-11-29T19:31:40+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#article","isPartOf":{"@id":"https:\/\/contentlab.com\/using-web-components-in-angular\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Using Web Components in Angular","datePublished":"2019-09-27T15:50:00+00:00","dateModified":"2021-11-29T19:31:40+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/using-web-components-in-angular\/"},"wordCount":1939,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","keywords":["Angular"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/using-web-components-in-angular\/","url":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular","name":"Using Web Components in Angular &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","datePublished":"2019-09-27T15:50:00+00:00","dateModified":"2021-11-29T19:31:40+00:00","breadcrumb":{"@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.grapecity.com\/blogs\/using-web-components-in-angular#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Using Web Components in Angular"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/1.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2939"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2939"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2939\/revisions"}],"predecessor-version":[{"id":6080,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2939\/revisions\/6080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4881"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2939"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}