ngx element

NgxElement

O NGXELEMENT permite componentes angulares de carga preguiçosos em aplicações não angulares. A biblioteca registrará um elemento personalizado no qual você pode passar um atributo para especificar qual componente você deseja carregar.

É uma ótima maneira de usar o Angular em sua plataforma CMS de maneira eficiente.

Instale elementos angulares

Esta biblioteca depende de elementos angulares. Você pode instalá -lo em execução:

 $ ng add @angular/elements

Instalando a biblioteca

 $ npm install ngx-element --save

Uso

1) Configurar o módulo que contém o componente carregado preguiçoso

Primeiro de tudo, exponha o componente angular que deve ser carregado por meio de uma propriedade CustomElementComponent.

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

2) Defina o mapa de componentes preguiçosos em seu AppModule

Assim como no roteador angular, defina o mapa do seletor de componentes e do módulo preguiçoso.

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

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

3) Use o componente carregado preguiçoso

Você pode carregar seu componente angular adicionando uma tag <ngx-element> ao DOM em seu aplicativo não angular, como segue:

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

4) Ouça eventos

Você pode ouvir eventos emitidos por componentes angulares.

Adicione um evento @Output ao seu componente:

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

Em seguida, adicione um ouvinte de evento ao evento tagClick no elemento apropado <ngx-element> :

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

Créditos

Obrigado a Juri Strumpflohner e NGX-LAZY-EL!