Utilisation des composants web dans une application Angular : Joyeux et amusant

Ce tutoriel fait partie de notre série Composants Web série! Nous allons utiliser le même composant Web que nous avons créé pour la série, et vous montrer comment l'utiliser dans une application Angular.

Selon le site web d'Angular Angularnous construisons une plateforme pour l'avenir". Il y a une façon Angular de développer des applications, et elle a à peu près tout ce dont vous avez besoin déjà intégré.

Les composants Web font-ils partie de cette plate-forme pour l'avenir ?

Selon les tests effectués par custom-elements-everywhere.coml'avenir s'annonce prometteur.

Custom-Elements-Everywhere.com Angular results

Angular réussit tous les tests avec un score total de 100%. Cela signifie que la façon dont Angular gère les données et les événements est entièrement compatible avec les composants Web.

Jetons un coup d'œil à un peu de code. Voici l'application que nous allons construire : Angular Answers. Connaissez-vous la réponse ?

Intégrer le composant Web dans Angular

Dans les articles précédents de cette série, il y avait deux façons d'inclure le composant Web :

• npm installe le paquet

• lien vers un CDN hébergeant le paquet

Avec Angular, seule l'installation du package via npm a fonctionné pour moi. Si quelqu'un a une idée de la raison pour laquelle le lien vers un CDN n'a pas fonctionné, merci de me le faire savoir. Pour l'instant, c'est npm install qui fonctionne.

npm install @dwane-vonage/dwanes-keypad

Rendre Angular conscient de l'existence d'un composant Web

Une fois installé, il ne reste plus qu'à placer la balise de l'élément du composant Web dans la balise app.component.htmln'est-ce pas ?

Si vous faites cela, vous verrez peut-être apparaître une erreur similaire à celle-ci :

Template parse error

Angular veut savoir tout ce qui se passe dans l'application afin d'optimiser et de fonctionner de la manière la plus performante possible. S'il ne s'agit pas d'un élément HTML standard ou d'un composant Angular, une erreur sera générée.

"Nous pensons qu'écrire de belles applications doit être un plaisir et une source d'amusement.

- Angulaire

Obtenir des erreurs n'est ni joyeux, ni amusant et Angular essaie de soulager la douleur avec des messages utiles dans ces erreurs. Ils suggèrent deux réponses possibles pour résoudre notre problème. La seconde suggestion est exactement ce que nous avons, et elle offre la solution. C'était à la fois joyeux et amusant !

Dans le fichier app.module.ts, importez le CUSTOM_ELEMENTS_SCHEMA :

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

Incluez-le ensuite dans l'objet décorateur @NgModule :

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Le fichier final devrait ressembler à ceci :

import { BrowserModule } from "@angular/platform-browser";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Ces changements permettent à Angular de savoir que s'il rencontre un élément qu'il ne sait pas gérer, il ne doit pas s'en préoccuper.

Maintenant, dans le fichier app.component.html nous plaçons le composant clavier comme suit :

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

Nous parlerons plus tard des pièces à l'intérieur, mais pour l'instant, prenez note de ce qui suit #keypad.

Dans le app.component.tsnous importons ElementRef, ViewChild et notre composant Web :

import { Component, ElementRef, ViewChild } from "@angular/core";
import "@dwane-vonage/dwanes-keypad/dwanes-keypad.js";

Le décorateur ViewChild est utilisé pour trouver le composant clavier à l'aide de la fonction #keypad mentionné plus haut et créer une keypadComponent référence de la classe ElementRef.

@ViewChild("keypad") keypadComponent: ElementRef;

Angular a maintenant une référence au composant Web et peut se lier aux données et aux événements. lier aux données et aux événements. Voyons maintenant ce qu'il en est.

Traitement des données

La syntaxe pour lier les données qui entrent dans votre composant Web est celle des crochets []. Pour les propriétés, cela ressemble à [property]="data". S'il s'agit d'un attribut, [attr.attribute]="data". Toute une section de la documentation sur la syntaxe de liaison est consacrée aux attributs HTML et aux propriétés DOM. Attributs HTML et propriétés DOM.

Comme le mentionnent les résultats de custom-elements-everywhere.com : "Cela fonctionne bien pour les données riches, comme les objets et les tableaux, et également pour les valeurs primitives, tant que l'auteur de l'élément personnalisé a mappé tous les attributs exposés avec les propriétés correspondantes."

Jetons un coup d'œil à notre composant clavier : Dans app.component.html

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

Les propriétés keys, placeholder et actionText sont liées à des variables portant le même nom (par commodité). cancelText est défini comme la chaîne de caractères Quit.

Ensuite, dans app.component.tsnous définissons les valeurs initiales des données pour les propriétés/attributs. Remarquez que les données des clés sont un tableau (données riches) qui est transmis à la propriété sans rien d'autre.

title = "CodeSandbox";
keys = ["", "1", "", "", "2", "", "", "3", "", "", "4", ""];
actionText = "submit answer";
placeholder = "Enter your answer.";

Voici un exemple de modification des données d'une propriété :

this.placeholder = "🎉 You got it right!";

Gestion des événements

Vous avez peut-être remarqué la parenthèse () autour de digits-sent. En effet, les app.component.html

<dwanes-keypad
  #keypad
  [keys]="keys"
  [placeholder]="placeholder"
  [actionText]="actionText"
  cancelText="Quit"
  (digits-sent)="answerSubmitted($event)"
></dwanes-keypad>

C'est la syntaxe utilisée par Angular pour se lier aux événements provenant de l'élément. Elle indique à Angular de transmettre les données provenant de l'événement personnalisé digits-sent du composant clavier à notre fonction answerSubmitted présentée ci-dessous : Dans app.component.ts

answerSubmitted(event) {
  console.log("event", event);
  this.keypadComponent.nativeElement.cancelAction();
  if (event.detail.digits) {
    if (event.detail.digits === this.correctAnswer) {
      console.log("got it right!");
      this.placeholder = "🎉 You got it right!";
      this.actionText = "Congrats!";
    } else {
      console.log("got it wrong");
      this.placeholder = "❌ Wrong answer.";
      this.actionText = "Try again.";
    }
  }
}

Que se passe-t-il si nous voulons appeler une méthode que le composant Web a rendue disponible ? Dans notre exemple, cela ressemblerait à ceci : Dans app.component.ts

this.keypadComponent.nativeElement.cancelAction();

L'application appelle la méthode cancelAction() du composant clavier. Prenez note de nativeElement. Il est nécessaire et provient de ElementRef.

Utiliser Angular pour créer des composants Web

Maintenant, soyons méta. Tout au long de cette série, nous avons discuté de l'utilisation des composants Web dans différents frameworks, mais si nous pouvions utiliser le framework pour créer des composants Web ? C'est là qu'interviennent les Angular Elements entrent en jeu. Ainsi, si vous aimez vraiment Angular, vous n'aurez jamais à quitter l'écosystème.

Conclusion

Angular a abaissé la barrière pour faire fonctionner les composants Web dans ses Applications. Il est à la hauteur de la déclaration "The modern web developer's platform" (la plateforme du développeur web moderne) sur leur page d'accueil. À tel point que si vous êtes vraiment dans Angular, vous pouvez l'utiliser pour construire des composants Web !

Avez-vous essayé d'incorporer des composants Web dans Angular ou de les créer à l'aide d'Angular Elements ? Faites-le nous savoir sur notre canal Slack de la communauté.