@angular/elements

Angular - library for using Angular Components as Custom Elements

7.0.4
Source
npm

Version published: 6 years ago

Weekly downloads: 335K; increased by8.93%

Maintainers: 1

Weekly downloads

Created: 7 years ago

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

17.0.4 (2023-11-20)

common

| Commit | Type | Description | | -- | -- | -- | | 7f1c55755d | fix | remove load on image once it fails to load (#52990) | | fafcb0d23f | fix | scan images once page is loaded (#52991) |

compiler

| Commit | Type | Description | | -- | -- | -- | | 98376f2c09 | fix | changed after checked error in for loops (#52935) | | 291deac663 | fix | generate i18n instructions for blocks (#52958) | | 49dca36880 | fix | nested for loops incorrectly calculating computed variables (#52931) | | f01b7183d2 | fix | produce placeholder for blocks in i18n bundles (#52958) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | f671f86ac2 | fix | add diagnostic for control flow that prevents content projection (#52726) |

core

| Commit | Type | Description | | -- | -- | -- | | db1a8ebdb4 | fix | cleanup loading promise when no dependencies are defined (#53031) | | 31a1575334 | fix | handle local refs when getDeferBlocks is invoked in tests (#52973) |

migrations

| Commit | Type | Description | | -- | -- | -- | | ac9cd6108f | fix | control flow migration fails for async pipe with unboxing of observable (#52756) (#52972) | | 13bf5b7007 | fix | Fixes control flow migration if then else case (#53006) | | 492ad4698a | fix | fixes migrations of nested switches in control flow (#53010) | | 0fad36eff2 | fix | tweaks to formatting in control flow migration (#53058) |

FAQs

What is @angular/elements?

Is @angular/elements popular?

Is @angular/elements well maintained?

Package last updated on 14 Nov 2018

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.

Install