angular-elements

What problem does it solve?

Enables packaging Angular components as standard web components so they can be embedded in non-Angular applications, legacy pages, or third-party consumers without requiring a full Angular runtime.

Core Features & Use Cases

• Create custom elements using createCustomElement to wrap Angular components for distribution.
• Input/output mapping and configuration via NgElementConfig and attribute/event mappings to surface component APIs as web component attributes and events.
• Standalone elements & micro-frontends support for building lightweight bundles, preserving Angular DI and change detection while embedding components into other frameworks or plain HTML.
• Use Case: Expose a reusable button, card, or input component as a custom element to let non-Angular teams embed it in a legacy app or a micro-frontend shell.

Quick Start

Register MyComponent as a custom element named my-component using createCustomElement with the application injector and demonstrate how to embed it in a plain HTML page.