Transform Your Angular Components into Reusable Custom Web Elements

3 min readDec 24, 2024

Have you ever wished your Angular components could be used seamlessly across any web project, regardless of the framework? With Angular Elements, you can! By turning your components into custom web elements, you unlock the power of reusable, framework-agnostic components — a game-changer for modern web development.

In this blog, we’ll dive into the step-by-step process of exposing an Angular component as a custom web element. Let’s turn your Angular expertise into something that can be used anywhere.

Prerequisites

Before we dive in, make sure you have the following tools at the ready:

Angular CLI
An Angular Project
Node.js and npm

Got everything? Great! Let’s get started.

Step 1: Install Angular Elements

Angular Elements makes it easy to bridge the gap between Angular and the broader web. Start by installing the necessary packages:

npm install @angular/elements
npm install @webcomponents/custom-elements

The @webcomponents/custom-elements package provides polyfills for broader browser compatibility—because who likes dealing with browser quirks?

Step 2: Create Your Star Component

Every great feature starts with a component. Let’s create a simple HelloWorldComponent that will soon shine as a custom web element:

ng generate component hello-world

Update the hello-world.component.ts file to give it some personality:

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, {{ name }}!</h1>`,
  styles: [
    'h1 { font-family: Roboto, Arial, sans-serif; color: #4CAF50; }'
  ]
})
export class HelloWorldComponent {
  name: string = 'Web Component';
}

Your component is ready to greet the world — but let’s make it even better.

Step 3: Make It a Custom Element

Now comes the magic. Let’s transform our Angular component into a reusable web element:

Update your AppModule:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [], // Do not bootstrap AppComponent for web elements
})
export class AppModule {
  constructor(private injector: Injector) {
    const helloWorldElement = createCustomElement(HelloWorldComponent, { injector });
    customElements.define('hello-world', helloWorldElement);
  }
}

Boom! Your component is now a custom element.

Step 4: Update main.ts for a Framework-Free Future

Custom elements don’t need a bootstrapped root component. Simplify your main.ts file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Your Angular app is now ready to generate web component magic.

Step 5: Build and Shine

Time to showcase your work! Build your project with:

ng build --prod

In the dist/your-project-name folder, you’ll find your masterpiece. Embed it in any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Web Element</title>
</head>
<body>
  <hello-world></hello-world>
<script src="main.js"></script>
  <script src="polyfills.js"></script>
  <script src="runtime.js"></script>
</body>
</html>

Open the file in your browser and watch your custom web element come to life!

Why Angular Elements?

By using Angular Elements, you’re building reusable, framework-agnostic components that fit perfectly into microfrontend architectures or cross-team collaborations. The best part? They work everywhere — from plain HTML to React and beyond.

Wrap-Up

Congratulations! You’ve just turned an Angular component into a custom web element. This approach not only boosts reusability but also bridges the gap between Angular and other frameworks, making your development skills even more versatile.

So, what will you build next? Share your creations and ideas in the comments. Let’s keep pushing the boundaries of modern web development.
Happy coding!