Comment utiliser les Web Components avec Angular ?

 

 

 

 

Avant de se lancer

Pour vous former sur cet outil, suivez notre formation Angular. Durant cette formation complète, vous apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.

 

Si vous avez déjà été formés à l’outil, nous vous proposons notre formation Angular Avancé. Vous apprendrez à résoudre des problèmes d’orchestration sur RxJS, l’amélioration des performances de votre site Web ou développer et gérer des composants Angular.

L’équipe Ambient IT

 

 

 

Qu’est-ce qu’un Web Component ?

 

Les Web Components désignent des blocs de code qui englobe la structure interne des éléments HTML incluant du JavaScript et du CSS. Cet ensemble de plusieurs technologies permet de créer des balises ou des éléments personnalisés comme des widgets, des boutons et diverses fonctions

endroits de notre point de vue. Les Web Components permettent de créer de nouvelles balises/éléments HTML à l’aide de JavaScript

pouvant être réutilisables au sein de différentes pages ou d’applications Web. Il contient 3 parties :

• Définition de l’élément (HTML)
• Un script JavaScript pour définir le comportement de l’élément
• Le style CSS qui définit l’apparence de l’élément

Les balises telles que div, spanet ont un comportement prédéfini et peuvent être utilisés à différents. Voici un exemple de la manière dont cela est fait.

<>
Copie
class SpanWithText extends HTMLSpanElement {
    constructor() {
        super();
        this.innerText = `Hello, I am a Web Component!`;
    }
}
customElements.define('span-with-text', SpanWithText);

On peut voir qu’une classe a été créée et, à chaque fois que cet élément sera créé, il aura un innertext avec value Hello, I am a Web Component. Ainsi, chaque fois que nous utilisons notre élément dans le DOM, il contiendra déjà le texte rempli à l’intérieur de lui-même.

Si vous souhaitez en savoir plus sur les composants Angular et vous former de manière efficace à l’outil, nous avons écrit un article expliquant comment se former à Angular.

 

 

Pourquoi utiliser un Web Component ?

 

Certaines bibliothèques ou frameworks comme Angular font partie des outils principaux des développeurs. Le but d’utiliser un Web Component est d’économiser la charge de travail pendant le développement d’un nouveau projet. Les développeurs doivent sûrement réécrire ou modifier le code, le fait de pouvoir réutiliser du code garantit un gain de temps.

 

 

 

Intégrer un Web component dans Angular

 

Tout d’abord, il est important d’insérer dans un template de l’application Angular cette balise pour afficher le composant :

npm install @angular/elements

 

Par la suite, pour créer un composant Angular, il est nécessaire d’utiliser la commande :

ng generate component mon-composant

 

Afin d’utiliser ce composant en tant que Web Component, le composant doit être enveloppé dans une classe « AngularElement » puis l’inscrire dans un module via la méthode « CreateCustomElement« 

 

 

 

Écriture d’un Web Component

 

Pour permettre à la classe MyComponent d’étendre la classe HTMLElement de JavaScript, il faut utiliser la ligne de commande :

class MyComponent extends HTMLElement {

 

Ensuite, il faut utiliser la méthode connectedCaliback pour qu’un élément soit ajouté à un document :

connectedCallback() {
    this.innerHTML = `<h1>Un test!</h1>`;
}

 

Enfin, pour enregistrer l’élément personnalisé, on utilise customElements.define() via la ligne de commande :

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

 

Ainsi, l’élément pourra être utilisé comme un élément HTML standard de n’importe quelle application ou page Web.

 

 

 

Utiliser le Web Component dans un composant Angular

 

Pour utiliser le Web Component dans un composant Angular, il faut inclure l’élément dans un template HTML. Pour cela, la commande a utilisé est :

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

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

 

Par la suite, il faut utiliser le schéma CUSTOM_ELEMENTS_SCHEMA pour envelopper un composant dans une classe Web Component avec la commande :

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, le Web Component pourra être utilisé comme un élément standard HTML :

<mon-composant></mon-composant>