https://github.com/zdigambar/dz-ngx-element
NgxElement enables to lazy load Angular components in non-angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load.
https://github.com/zdigambar/dz-ngx-element
aem angular-elements non-angular
Last synced: about 2 months ago
JSON representation
NgxElement enables to lazy load Angular components in non-angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load.
- Host: GitHub
- URL: https://github.com/zdigambar/dz-ngx-element
- Owner: zdigambar
- Created: 2024-10-20T12:28:08.000Z (about 1 year ago)
- Default Branch: Master
- Last Pushed: 2024-12-23T18:50:56.000Z (10 months ago)
- Last Synced: 2025-08-09T00:44:46.773Z (3 months ago)
- Topics: aem, angular-elements, non-angular
- Language: TypeScript
- Homepage: https://github.com/zdigambar/dz-ngx-element
- Size: 2.07 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - dz-ngx-element (⭐1) - [NgxElement](https://www.npmjs.com/package/@zdigambar/ngx-element) enables to lazy load Angular components in non-angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load. (Recently Updated / [Dec 27, 2024](/content/2024/12/27/README.md))
- fucking-awesome-angular - dz-ngx-element - 🌎 [NgxElement](www.npmjs.com/package/@zdigambar/ngx-element) enables to lazy load Angular components in non-Angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load. (Table of contents / Third Party Components)
- awesome-angular - dz-ngx-element - [NgxElement](https://www.npmjs.com/package/@zdigambar/ngx-element) enables to lazy load Angular components in non-Angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load. (Table of contents / Third Party Components)
README
# Supported Version
| ngx-element | Angular |
| ------------ | ------- |
| 1.x.x | ^10.x.x |
| 2.x.x | ^11.x.x |
| 3.x.x | ^12.x.x |
| 4.x.x | ^13.x.x |
| 5.x.x | ^14.x.x |
| 6.x.x | ^15.x.x |
| 7.x.x | ^16.x.x |
| 8.x.x | ^17.x.x |
| 9.x.x | ^18.x.x |
# NgxElement
NgxElement enables to lazy load Angular components in non-angular applications.
The library will register a custom element to which you can pass an attribute to specify what component you want to load.
It's a great way to use Angular in your CMS platform in an efficient manner.
## Install Angular Elements
This library depends on Angular Elements. You can install it by running:
```
$ ng add @angular/elements
```
## Installing the library
```
$ npm install @zdigambar/ngx-element --save
```
## Usage
### 1) Configure the Module containing the lazy loaded component
First of all, expose the Angular Component that should be loaded via a customElementComponent property.
```
...
@NgModule({
declarations: [TalkComponent],
...
exports: [TalkComponent],
entryComponents: [TalkComponent]
})
export class TalkModule {
customElementComponent: Type = TalkComponent;
...
}
```
### 2) Define the lazy component map in your AppModule
Just like with the Angular Router, define the map of component selector and lazy module.
```
const lazyConfig = [
{
selector: 'talk',
loadChildren: () => import('./talk/talk.module').then(m => m.TalkModule)
}
];
@NgModule({
...,
imports: [
...,
NgxElementModule.forRoot(lazyConfig)
],
...
})
export class AppModule {
...
ngDoBootstrap() {}
}
```
### 3) Use the lazy loaded component
You can load your Angular component by adding an `` tag to the DOM in your non-angular application like follows:
```
```
### 4) Listen to events
You can listen to events emitted by Angular components.
Add an `@Output` event to your component:
```
...
@Output() tagClick: EventEmitter = new EventEmitter();
...
```
Then add an event listener to the `tagClick` event on the appropiate `` element:
```
const talks = document.querySelector('ngx-element[selector="talk"]');
talks.addEventListener('tagClick', event => {
const emittedValue = event.detail;
...
});
```