📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@angular/elements

Package Overview
Dependencies
Maintainers
1
Versions
741
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular/elements

Angular - library for using Angular Components as Custom Elements

8.2.0
Source
npm
Version published
Weekly downloads
246K
-33.29%
Maintainers
1
Weekly downloads
 
Created

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.

FAQs

Package last updated on 31 Jul 2019

Did you know?

Socket

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.

Install

Related posts

A New Overview in our Dashboard

Product

A New Overview in our Dashboard

We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.

By André Staltz  -  Apr 29, 2025