Utiliser les éléments Angular – Pourquoi et comment ? – Partie 1
Démarrer
Démarrons en créant un nouveau projet Angular dans notre système. Pour cela, assurez-vous que vous avez la dernière version d’Angular CLI installée. Exécutez la commande suivante dans votre terminal:
$ npm install -g @angular/cli
Une fois cette installation terminée, nous pouvons l’utiliser pour créer une nouvelle application initiale dans notre système comme ceci:
$ ng new angular-app
Vous serez ensuite invité à sélectionner les fonctionnalités supplémentaires que vous pourriez vouloir ajouter à votre projet Angular, des choses comme le routage et le type de format de feuille de style. Sélectionnez la réponse par défaut en appuyant sur la touche Enter/Return.
Le CLI installe les paquets et dépendances Angular nécessaires dans un dossier appelé angular-app. Vous pouvez servir cette application sur le navigateur en exécutant les commandes suivantes :
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Comme vous pouvez le voir, l’application contient déjà quelques éléments que nous pouvons afficher à l’écran. Mais nous n’en avons pas besoin. Retournez donc dans votre éditeur de code (je ❤️ VS Code) et supprimez tout ce qui se trouve à l’intérieur du fichier src/app/app.component.html et écrivez un seul élément <h1>.
<h1>Welcome To Angular Elements!</h1>
Si vous jetez un coup d’œil à la structure des fichiers, vous verrez que chaque composant dans angular est constitué d’une multitude de fichiers. Pour le composant App seul, il y a un fichier .ts, .html, .css, et un spec.ts qui contient les tests, et un fichier module.ts. Il y aura également un fichier routing.module.ts facultatif si vous aviez choisi d’ajouter la fonctionnalité de routage à l’application lors de sa création à l’aide du CLI.
Au lieu d’écrire tous ces fichiers pour nos composants, Angular CLI nous donne une méthode raccourcie qui va générer ces fichiers pour nous. Utilisons cette méthode pour créer un composant HelloWorld dans notre système.
$ ng g c HelloWorld
Cette commande unique créera un dossier nommé hello-world à l’intérieur du dossier app. Si vous ouvrez ce dossier, vous y trouverez ces 4 fichiers :
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Nous n’utiliserons que le fichier .html et .ts. Il y a des drapeaux supplémentaires que nous pouvons passer à la commande ng g c. Mais afin de garder les choses simples et à point, je ne les utiliserai pas. Consultez Angular Docs pour en savoir plus sur la façon d’utiliser cette commande.
Dans le fichier hello-world.component.ts, vous verrez que le selector est défini à app-hello-world. Donc, si vous ajoutez ceci au app.component.html comme ceci:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Alors le contenu de hello-world.component.html sera affiché dans le navigateur.
Notre configuration initiale est maintenant prête. Commençons à utiliser les éléments Angular.
Convertir un composant en élément personnalisé
En ce moment, nous avons un simple composant HelloWorld qui imprime simplement du texte à l’écran. Voyons comment nous pouvons insérer ce composant dans l’application d’une manière plus dynamique. Pour ce faire, remplaçons le app-hello-world par un div et un button. Ajoutons également le listener click au button, afin que lorsque quelqu’un clique sur le bouton, le composant HelloWorld puisse être affiché. Ceci sera géré par une fonction showMessage(). Allez donc à la page app.component.html et faites ces changements:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Nous devons ensuite définir la fonction showMessage() dans le fichier app.component.ts. Ici, nous utiliserons la manipulation régulière du DOM pour obtenir le div en le sélectionnant en utilisant son id de hello. Ensuite, nous appliquerons la fonction innerHTML pour insérer le composant app-hello-world comme ceci:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Vous pouvez aller dans votre navigateur et cliquer sur le bouton, mais je vous dis tout de suite que rien ne va se passer. Mais encore une fois, si vous allez les outils dev du navigateur et regardez là, vous verrez que le composant HelloWorld est inséré.
La raison pour laquelle nous ne pouvons pas voir le composant sur l’écran est qu’Angular ne peut pas reconnaître la balise app-hello-world puisqu’elle a été insérée dans le modèle dynamiquement. Angular a besoin que tous les éléments soient présents dans le template, ou vous devez utiliser la fabrique de composants dynamiques pour instancier le composant à l’exécution à travers votre code.
C’est là que Angular Elements entre en jeu. En utilisant Angular Element, tout ce que nous devons faire est d’insérer la balise dynamiquement, et Angular lui-même instanciera le composant pour nous. Voyons enfin comment utiliser ce composant dans notre application. Tout d’abord, utilisez la commande ng add pour installer les éléments Angular dans notre app:
$ ng add @angular/elements
Une fois que vous avez installé cela, allez dans app.module.ts et apportez les modifications suivantes à la @NgModule :
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Puis dans la classe AppModule, écrivez une fonction constructor créer une nouvelle instance du createCustomElement et lui passer le HelloWorldComponent comme indiqué ci-dessous:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Avec le composant, nous devons également lui passer le injector. Le injector est quelque chose que nous utilisons pour résoudre les dépendances. Avec cela, nous avons créé une instance du HelloWorldComponent comme un élément personnalisé. Nous pouvons ensuite utiliser l’API customElements pour définir la balise du composant comme app-hello-world.
customElements.define('app-hello-world', custom);
Retournez au fichier hello-world.component.ts et supprimez/commentez le selector à l’intérieur de la section @Component. De cette façon, Angular ne sera pas confus et saura utiliser l’élément personnalisé que nous venons de créer.
Réexécutez la commande ng serve --open pour vous assurer qu’Angular prend en compte tous les changements que nous venons de faire.
Il y a de bonnes chances que le bouton n’affiche toujours pas le HelloWorldComponent. Cela peut être dû au fait qu’Angular « ne parvient pas à construire le HTMLElement ». Pour résoudre ce problème, installez les polyfills webcomponentjs:
$ yarn add @webcomponents/webcomponentsjs
Puis, allez dans le fichier polyfills.ts et importez ce qui suit:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Enfin ! Notre élément personnalisé s’affichera à l’écran lorsque nous cliquerons sur ce bouton.
.