ng-elementum

ng-elementum is a modern fork of @angular/elements that packages Angular components as framework-agnostic Custom Elements (Web Components). It enables the use of Angular components outside Angular applications, allowing for distribution of reusable UI components without requiring Angular knowledge and leveraging native browser APIs for better interoperability.

Key Features

Automatic Signal Input Exposure — Signal inputs defined with input() are automatically proxied as runtime properties on the custom element with correct TypeScript typings.

Exposed Component Methods — Allows explicit exposure of component methods directly on the custom element instance, preserving method context and working across Angular and non-Angular hosts.

Independent Element Routing — Provides provideWebComponentRouter for scoped, in-memory routing inside an element that doesn't interfere with the host page or other Angular apps.

Dynamic Application Config — Supports passing a factory function for ApplicationConfig that executes in the platform injection context, enabling runtime-dependent configuration.

Two-Level DI Architecture — Introduces clear platform scope (shared across all elements) and root scope (isolated per element) dependency injection architecture.

PlatformElementum Helper — A dedicated platform helper optimized for Web Components that solves issues with multiple widgets sharing global services and enables safe element re-creation on platform restart.

Philosophy

ng-elementum preserves the simplicity of Angular Elements while adding powerful features for exposing component APIs, improving flexibility, and ensuring better developer experience through clear architectural patterns.