@angular/elements
Advanced tools
Angular - library for using Angular Components as Custom Elements
@angular/elements allows Angular components to be used as custom elements (web components). This enables the integration of Angular components into non-Angular applications and enhances reusability across different frameworks and libraries.
Creating a Custom Element
This code demonstrates how to create a custom element from an Angular component. The `createCustomElement` function is used to convert `MyComponent` into a custom element named 'my-element'.
import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my-component.component';
@NgModule({
declarations: [MyComponent],
imports: [BrowserModule],
entryComponents: [MyComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const myElement = createCustomElement(MyComponent, { injector });
customElements.define('my-element', myElement);
}
ngDoBootstrap() {}
}Using the Custom Element in HTML
Once the Angular component is converted into a custom element, it can be used in any HTML file just like a standard HTML element. This example shows how to include and use the custom element 'my-element' in an HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Angular Element</title>
<script src="path/to/your/angular-element.js"></script>
</head>
<body>
<my-element></my-element>
</body>
</html>Stencil is a compiler that generates Web Components (custom elements) and builds high-performance web apps. It is framework-agnostic and can be used to create reusable components that work with any major framework or no framework at all. Compared to @angular/elements, Stencil is more focused on performance and offers additional features like lazy loading and pre-rendering.
Lit is a simple library for building fast, lightweight web components. It provides a minimal API to define custom elements and manage their lifecycle. Lit is known for its small size and ease of use, making it a good alternative to @angular/elements for projects that require lightweight and fast custom elements.
vue-custom-element is a Vue plugin that enables the creation of custom elements from Vue components. It allows Vue components to be used as web components in non-Vue applications. This package is similar to @angular/elements but is tailored for Vue.js, providing a seamless way to integrate Vue components as custom elements.
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
Usage information and reference details can be found in Angular documentation.
License: MIT
20.0.0-next.2 (2025-03-12)
InjectFlags has been removed.inject no longer accepts InjectFlags.Injector.get no longer accepts InjectFlags.EnvironmentInjector.get no longer accepts InjectFlags.TestBed.get no longer accepts InjectFlags.TestBed.inject no longer accepts InjectFlags.any overload has been removed from
injector.get. It now only supports ProviderToken<T> and (deprecated
since v4) string.ApplicationRef.tick will no longer catch and report
errors to the appplication ErrorHandler. Errors will instead be thrown out of
the method and will allow callers to determine how to handle these
errors, such as aborting follow-up work or reporting the error and
continuing.| Commit | Type | Description | | -- | -- | -- | | 92250493ff | fix | support equality function in httpResource (#60026) |
| Commit | Type | Description | | -- | -- | -- | | ef1fd137a9 | fix | incorrect spans for template literals (#60323) |
| Commit | Type | Description | | -- | -- | -- | | a1cacc5b17 | fix | avoid fatal diagnostics for missing template files (#58673) | | 9be2b334ed | fix | handle transformed classes when generating HMR code (#60298) |
| Commit | Type | Description |
| -- | -- | -- |
| 611baaf069 | feat | remove InjectFlags from public API (#60318) |
| e170d24240 | fix | add migration away from InjectFlags (#60318) |
| 79ae35577e | fix | check whether application is destroyed before initializing event replay (#59789) |
| c82384104f | fix | ensures immediate trigger fires properly with lazy loaded routes (#60203) |
| de2bfc0913 | fix | fix removal of a container reference used in the component file (#60210) |
| ff772d7800 | fix | fix typing on injector.get to omit 'any' (#60202) |
| 338818ce89 | fix | Surface errors from ApplicationRef.tick to callsite (#60102) |
| Commit | Type | Description | | -- | -- | -- | | 81fe0536fd | fix | Make sure statusChanges is emitted (#57098) |
| Commit | Type | Description | | -- | -- | -- | | a980ac9a6a | refactor | Deprecate the HammerJS integration (#60257) |
| Commit | Type | Description |
| -- | -- | -- |
| 0cff9a12d3 | fix | add missing peer dependency for rxjs (#60308) |
| Commit | Type | Description | | -- | -- | -- | | 219f41d049 | fix | Prevent dangling promise rejections from internal navigations (#60162) | | cae1fe519b | fix | update symbols (#60233) |
<!-- CHANGELOG SPLIT MARKER --><a name="19.2.2"></a>
FAQs
Angular - library for using Angular Components as Custom Elements
The npm package @angular/elements receives a total of 326,899 weekly downloads. As such, @angular/elements popularity was classified as popular.
We found that @angular/elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.