Using Web Components in Angular
Tags: webcomponents, angular
Published: 2019-08-30 14:09:39

---
title: Using Web Components in Angular
description: Learn how to seamlessly integrate and use Web Components in Angular, including custom properties and events.
keywords: Angular, Web Components, Cory Rylan
tags: web-components, angular
canonical_url: https://coryrylan.com/blog/using-web-components-in-angular
published: true
---

This post is a modified excerpt chapter from my new EBook [Web Component Essentials](https://webcomponent.dev)

[Angular](https://angular.io) has been designed from the ground up to work with Web Components. Angular not only can consume Web Components but can also publish Angular components as Web Components via the Angular Elements API. For our example, we will be showing how to install a basic dropdown component into an Angular CLI project.

![Web Component Working in Angular](https://thepracticaldev.s3.amazonaws.com/i/jyvmjxkokodrjn697mkj.png)

First, we will create an Angular project using the Angular CLI. We will need to install the Angular CLI by running the following command:

```bash
npm install -g @angular/cli
```

This command will install the Angular CLI tooling to our terminal/command line. Once installed, we can run the following command to create our CLI project.

```bash
ng new my-app
```

This command will create a CLI project and install all the necessary NPM
packages. Once completed in our CLI project, we can run:

```bash
ng serve
```

The `ng serve` command will run our Angular application locally at
`localhost:4200`. Now that we have our Angular project up and running, we need to install our dropdown component. In our Angular project, we can now install the test web component by running:

```bash
npm install web-component-essentials
```

This command will install our component to our Angular project and will add an entry into the `package.json`. Once installed in our `app.module.ts` we can import the component.

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'web-component-essentials';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ]
})
export class AppModule { }
```

Once imported, we need to add `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` to the application module. The `CUSTOM_ELEMENTS_SCHEMA` tells Angular that we will be using custom elements that are not registered Angular components in our application.

Now that our component is installed we can use it in our Angular application. Let's take a look at the `app.component.ts` file.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myTitle = 'project-angular';
  open = false;

  toggle(event) {
    console.log(event);
    this.open = event.detail;
  }
}
```

The App component is the root component of our Angular application. On our component, we will have two properties. The `myTitle` which will be passed to the dropdown and the `open` property to track if the dropdown is open or closed.

The App component also has a single method `toggle()` that will be called whenever
the dropdown has opened or closed. Next, let's look at the `app.component.html` template.

```html
<h1>Angular Application using Web Components</h1>

<p>
  {{open ? 'open' : 'closed'}}
</p>

<x-dropdown [title]="myTitle" (show)="toggle($event)">
  Hello from Web Component in Angular!
</x-dropdown>
```

In our template, we have an Angular expression that displays the message `open` or `closed` based on the value of the `open` property. Angular has two different pieces of syntax for binding to properties and events. This syntax not only works for Angular components but also Web Components.

The first binding is the property binding syntax. This syntax uses the
square braces `[title]="myTitle"` to tell Angular what property on the component should be set. Our example we take the `myTitle` property value and set the `[title]` property of the dropdown component.

The second binding syntax is the event syntax. Angular components can listen to DOM events as well as Angular and Web Component events with this syntax. To bind to a event we use the parentheses `(show)="toggle($event)"`. In the parentheses, we pass the name of the event we want to listen to. On the right hand of the binding, we pass a method we want to be executed whenever the event occurs. If we want to pass the event value to the method, we use the `$event` keyword to
tell Angular to pass the event value onto the `log` method.

With everything hooked up, we should see an output similar to this:

![Web Component Working in Angular](https://thepracticaldev.s3.amazonaws.com/i/jyvmjxkokodrjn697mkj.png)

Angular is an excellent option for client-side applications as it has a robust API that works well for large enterprise applications while also adding fantastic Web Component support. Check out the full [working example here](https://stackblitz.com/edit/angular-b3kbq3)!