ngx element

Ngxelement

NGXELEMENT permite componentes angulares de carga perezosa en aplicaciones no angulares. La biblioteca registrará un elemento personalizado al que puede pasar un atributo para especificar qué componente desea cargar.

Es una excelente manera de usar Angular en su plataforma CMS de manera eficiente.

Instalar elementos angulares

Esta biblioteca depende de elementos angulares. Puede instalarlo ejecutando:

 $ ng add @angular/elements

Instalación de la biblioteca

 $ npm install ngx-element --save

Uso

1) Configure el módulo que contiene el componente cargado perezoso

En primer lugar, exponga el componente angular que debe cargarse a través de una propiedad de componente personalizado.

 ...
@NgModule({
  declarations: [TalkComponent],
  ...
  exports: [TalkComponent],
  entryComponents: [TalkComponent]
})
export class TalkModule {
  customElementComponent: Type<any> = TalkComponent;
  ...
}

2) Defina el mapa de componentes perezosos en su AppModule

Al igual que con el enrutador angular, defina el mapa del selector de componentes y el módulo perezoso.

 const lazyConfig = [
  {
    selector: 'talk',
    loadChildren: () => import('./talk/talk.module').then(m => m.TalkModule)
  }
];

@NgModule({
  ...,
  imports: [
    ...,
    NgxElementModule.forRoot(lazyConfig)
  ],
  ...
})
export class AppModule {
  ...
  ngDoBootstrap() {}
}

3) Use el componente cargado perezoso

Puede cargar su componente angular agregando una etiqueta <ngx-element> al DOM en su aplicación no angular como SIGUS:

 <ngx-element
  selector="talk"
  data-title="Angular Elements"
  data-description="How to write Angular and get Web Components"
  data-speaker="Bruno">
</ngx-element>

4) Escuche eventos

Puedes escuchar eventos emitidos por componentes angulares.

Agregue un evento @Output a su componente:

 ...
@Output() tagClick: EventEmitter<string> = new EventEmitter();
...

Luego agregue un oyente del evento al evento tagClick en el elemento Apropiate <ngx-element> :

 const talks = document.querySelector('ngx-element[selector="talk"]');
talks.addEventListener('tagClick', event => {
  const emittedValue = event.detail;
  ...
});

Créditos

¡Gracias a Juri Strumpflohner y NGX Lazy-El!