Angular Elements

@angular/elements

Version: Angular 21 (2025) Tags: Web Components, Custom Elements, Micro-frontends

References: Elements Guide • API

API Changes

This section documents recent version-specific API changes.

• NEW: createCustomElement API — Package Angular components as custom elements

• NEW: NgElementConfig — Configure custom element behavior

• NEW: Input/Output mapping — Map Angular inputs/outputs to web component attributes

• NEW: Standalone elements — Build standalone elements without NgModule

Best Practices

• Install @angular/elements

npm install @angular/elements

• Create custom element from component

import { createCustomElement } from '@angular/elements';

@Injectable()
export class ElementRegistrar {
  constructor(private injector: Injector) {}

  register() {
    const element = createCustomElement(MyComponent, { injector: this.injector });
    customElements.define('my-element', element);
  }
}

• Use in main.ts

import { createApplication } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';