Angular

Appearance

Comment créer un Web Component et l'utiliser dans un module Angular ? ​

Pour créer un Web Component dans un projet Angular, vous devrez d'abord installer les outils nécessaires en utilisant la commande suivante :

sh
npm install @angular/elements
npm install @angular/elements

Ensuite, vous pouvez créer un composant Angular en utilisant la commande ng generate component :

sh
ng generate component mon-composant
ng generate component mon-composant

Pour rendre ce composant utilisable en tant que Web Component, vous devez l'envelopper dans une classe qui étend la classe AngularElement, et l'inscrire comme un composant dans un module en utilisant la méthode createCustomElement()

Voici un exemple de code pour envelopper un composant dans une classe de Web Component:

ts
import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-root',
  template: '<p>Mon composant</p>'
})
class MonComposant {
  constructor(private injector: Injector) {}
}

const el = createCustomElement(MonComposant, { injector: Injector });
customElements.define('mon-composant', el);
import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'app-root',
  template: '<p>Mon composant</p>'
})
class MonComposant {
  constructor(private injector: Injector) {}
}

const el = createCustomElement(MonComposant, { injector: Injector });
customElements.define('mon-composant', el);

Enfin, vous pouvez utiliser ce Web Component comme un élément HTML standard :

html
<mon-composant></mon-composant>
<mon-composant></mon-composant>