Angular

Appearance

Intégrer un WebComponent existant ​

Qu'est qu'un Web Component ?

Les Web Components sont un ensemble de technologies web qui permettent de créer des éléments HTML personnalisés qui peuvent être réutilisés dans différentes pages ou applications web.

Un Web Component est constitué de plusieurs parties :

  • Une définition de l'élément (HTML)
  • Un script JavaScript qui définit le comportement de l'élément
  • Un styles CSS qui définit l'apparence de l'élément

Les Web Components sont créés en utilisant des technologies web standard telles que HTML, CSS et JavaScript, ce qui les rend compatibles avec la plupart des navigateurs modernes. Les Web Components permettent de créer des éléments personnalisés qui peuvent être utilisés comme des éléments HTML standard (par exemple, <mon-composant></mon-composant>) dans n'importe quelle page ou application web, indépendamment de la technologie utilisée pour construire cette page ou cette application.

Voici un exemple possible de la structure des dossiers pour un projet Angular qui utilise un Web Component créé en dehors d'Angular

my-project/
|
|- src/
   |
   |- app/
      |
      |- mon-composant/
         |
         |- mon-composant.component.ts
         |- mon-composant.module.ts
      |
      |- app.module.ts
      |- app.component.ts
|- web-components/
   |
   |- my-component.ts
|- index.html
|- main.ts
|- ... (autres fichiers)
my-project/
|
|- src/
   |
   |- app/
      |
      |- mon-composant/
         |
         |- mon-composant.component.ts
         |- mon-composant.module.ts
      |
      |- app.module.ts
      |- app.component.ts
|- web-components/
   |
   |- my-component.ts
|- index.html
|- main.ts
|- ... (autres fichiers)

Un Web Component ​

ts
// web-components/my-component.ts
class MyComponent extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<h1>Un test!</h1>`;
    }
}

customElements.define('my-component', MyComponent);
// web-components/my-component.ts
class MyComponent extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<h1>Un test!</h1>`;
    }
}

customElements.define('my-component', MyComponent);

L'écriture d'un WebComponent

  1. La définition d'un nouveau type d'élément personnalisé en utilisant la classe MyComponent qui étend la classe HTMLElement de JavaScript natif :
js
class MyComponent extends HTMLElement {
class MyComponent extends HTMLElement {

Cela signifie que la classe MyComponent hérite des propriétés et des méthodes de la classe HTMLElement, ce qui lui permet de comporter comme un élément HTML standard.

  1. La définition d'une méthode connectedCallback qui est appelée lorsque l'élément est ajouté à un document :
js
connectedCallback() {
    this.innerHTML = `<h1>Un test!</h1>`;
}
connectedCallback() {
    this.innerHTML = `<h1>Un test!</h1>`;
}
  1. L'enregistrement de l'élément personnalisé avec customElements.define() :
js
customElements.define('my-component', MyComponent);
customElements.define('my-component', MyComponent);

La fonction customElements.define() est utilisée pour enregistrer l'élément personnalisé avec un nom d'élément spécifié (my-component) et une classe (MyComponent) qui définit son comportement. Cela permet à l'élément d'être utilisé comme un élément HTML standard dans n'importe quelle page ou application web

Pour utiliser un Web Component créé en dehors d'Angular dans un composant Angular, vous devrez inclure cet élément dans votre template HTML de la même manière que vous utiliseriez n'importe quel autre élément HTML standard.

Voici un exemple de comment utiliser le Web Component MyComponent dans un composant Angular :

ts
// mon-composant.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  template: `<my-component></my-component>`
})
export class MonComposantComponent {}
// mon-composant.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  template: `<my-component></my-component>`
})
export class MonComposantComponent {}

Il est important de noter que vous devrez également utiliser le schéma CUSTOM_ELEMENTS_SCHEMA dans votre module pour que Angular sache qu'il doit ignorer la validation de schéma pour les éléments personnalisés.

ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MonComposantComponent } from './mon-composant.component';

@NgModule({
  declarations: [
    MonComposantComponent
  ],
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MonComposantModule {}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MonComposantComponent } from './mon-composant.component';

@NgModule({
  declarations: [
    MonComposantComponent
  ],
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MonComposantModule {}

Cela devrait permettre à Angular de reconnaître et de rendre le Web Component MyComponent dans le composant MonComposantComponent.

Bien comprendre CUSTOM_ELEMENTS_SCHEMA

L'une des propriétés d'un module Angular est schemas. Les schémas de validation de template permettent à Angular de vérifier la syntaxe et la structure des templates de composants pour s'assurer qu'ils sont valides.

Il existe deux types de schémas de validation de template dans Angular :

  • NO_ERRORS_SCHEMA : désactive la validation de schéma pour les composants de ce module. Cela signifie qu'Angular ne vérifiera pas la syntaxe et la structure des templates de composants pour s'assurer qu'ils sont valides.
  • CUSTOM_ELEMENTS_SCHEMA : permet l'utilisation d'éléments personnalisés dans les templates de composants de ce module. Angular reconnaitra ces éléments comme valides, même s'il ne les connait pas.