Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@angular/elements
Advanced tools
What is @angular/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.
What are @angular/elements's main functionalities?
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>Other packages similar to @angular/elements
stencil
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
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
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.
Angular
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
License: MIT
18.2.7 (2024-10-02)
common
| Commit | Type | Description | | -- | -- | -- | | 249d0260f9 | fix | execute checks and remove placeholder when image is already loaded (#55444) | | 46a2ad39f5 | fix | prevent warning about oversize image twice (#58021) | | 8f2b0ede59 | fix | skip checking whether SVGs are oversized (#57966) |
compiler-cli
| Commit | Type | Description | | -- | -- | -- | | 901c1e1a7f | fix | correctly get the type of nested function call expressions (#57010) |
core
| Commit | Type | Description | | -- | -- | -- | | 2f347ef8fc | fix | provide flag to opt into manual cleanup for after render hooks (#57917) |
http
| Commit | Type | Description | | -- | -- | -- | | ca637fe6a9 | fix | cleanup JSONP script listeners once loading completed (#57877) |
migrations
| Commit | Type | Description | | -- | -- | -- | | b9d846dad7 | fix | delete constructor if it only has super call (#58013) |
upgrade
| Commit | Type | Description | | -- | -- | -- | | e40a4fa3c7 | fix | support input signal bindings (#57020) |
<!-- CHANGELOG SPLIT MARKER --><a name="18.2.6"></a>
FAQs
Angular - library for using Angular Components as Custom Elements
The npm package @angular/elements receives a total of 195,695 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.
Package last updated on 18 Sep 2019
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.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025