Using Web Components in Angular

This post is a modified excerpt chapter from my new EBook Web Component Essentials

Angular 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.

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

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.

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:

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:

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.

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.

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.

<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:

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 below!