Angular - How to Create Custom Elements in Angular

Angular allows you to create custom elements using the Angular Elements package. Angular Elements is a set of Angular directives that helps you convert Angular components into reusable custom elements (also known as web components). This enables you to use Angular components in non-Angular applications or frameworks.

Here are the general steps to create a custom element using Angular: Install Angular Elements:

Make sure you have Angular CLI installed, and then install Angular Elements using the following command:

ng add @angular/elements.

Create an Angular Component: Create a new Angular component using the Angular CLI or manually. For example, let's create a simple component named MyCustomElement:
ng generate component my-custom-element

Register the Component as a Custom Element:

In the component file (my-custom-element.component.ts), you need to use the createCustomElement function from @angular/elements to create a custom element from your Angular component:


import { Component, Input, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';

  selector: 'app-my-custom-element',
  template: '

Hello from MyCustomElement!

', }) export class MyCustomElementComponent implements OnInit { ngOnInit(): void { // Register the custom element const myCustomElement = createCustomElement(MyCustomElementComponent, { injector: this.injector }); customElements.define('my-custom-element', myCustomElement); } }
Include the Component in AppModule:

Make sure to include your component in the declarations array of the AppModule and set entryComponents to your custom element:


  declarations: [
    // other components...
  entryComponents: [MyCustomElementComponent],
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {}

Bootstrap the Application:

Since you're using Angular Elements, you need to manually bootstrap your application by adding an empty ngDoBootstrap method in the AppModule.

Build the Angular Application:

Build your Angular application using the Angular CLI:

ng build --prod

Include the Built Files:

Include the built files in your non-Angular application (e.g., a simple HTML file). Make sure to include the required polyfills for web components:


Use the Custom Element:

Now you can use your Angular custom element in any HTML file:


Angular Elements is most useful when you need to use Angular components in non-Angular environments. If you're building a full Angular application, you might not need to go through the process of creating custom elements