ngx element

Ngxelement

NGXElement permet de charger des composants angulaires de chargement dans les applications non angulaires. La bibliothèque enregistrera un élément personnalisé dans lequel vous pouvez transmettre un attribut pour spécifier le composant que vous souhaitez charger.

C'est un excellent moyen d'utiliser Angular dans votre plate-forme CMS de manière efficace.

Installer des éléments angulaires

Cette bibliothèque dépend des éléments angulaires. Vous pouvez l'installer en fonctionnant:

 $ ng add @angular/elements

Installation de la bibliothèque

 $ npm install ngx-element --save

Usage

1) Configurez le module contenant le composant chargé paresseux

Tout d'abord, exposez le composant angulaire qui doit être chargé via une propriété CustomElementComponent.

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

2) Définissez la carte des composants paresseux dans votre appmodule

Tout comme avec le routeur angulaire, définissez la carte du sélecteur de composants et du module paresseux.

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

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

3) Utilisez le composant chargé paresseux

Vous pouvez charger votre composant angulaire en ajoutant une balise <ngx-element> au DOM dans votre application non angulaire comme suit:

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

4) Écoutez les événements

Vous pouvez écouter les événements émis par les composants angulaires.

Ajoutez un événement @Output à votre composant:

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

Ensuite, ajoutez un écouteur d'événements à l'événement tagClick sur l'élément APPPROPIÉ <ngx-element> :

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

Crédits

Merci à Juri Strumpflohner et Ngx-Lazy-El!