Uso de Web Components en una aplicación Angular: Alegre y divertido

Este tutorial forma parte de nuestra serie Web Components serie¡! Usaremos el mismo Web Component que creamos para la serie, y te mostraremos cómo usarlo en una aplicación Angular.

Según el sitio web de Angular sitio web"Estamos construyendo una plataforma para el futuro". Hay una manera Angular para desarrollar aplicaciones, y prácticamente tiene todo lo que necesita ya incorporado.

¿Son los Web Components parte de esa plataforma para el futuro?

Según las pruebas realizadas por custom-elements-everywhere.comel futuro se presenta muy prometedor.

Custom-Elements-Everywhere.com Angular results

Angular supera todas las pruebas con una puntuación total del 100%. Esto significa que la forma en que Angular maneja los datos y eventos es totalmente compatible con Web Components.

Veamos algo de código. Aquí está la aplicación que vamos a construir: Angular Answers. ¿Conoces la respuesta?

Introducción del componente web en Angular

En las entradas anteriores de esta serie, había dos formas posibles de incluir el Web Component:

• npm install el paquete

• enlace a una CDN que aloje el paquete

Con Angular, sólo la instalación del paquete a través de npm funcionó para mí. Si alguien tiene alguna idea de por qué vincular a un CDN no funcionó, por favor hágamelo saber. Por ahora, npm install es.

npm install @dwane-vonage/dwanes-keypad

Hacer que Angular conozca el Componente Web

Una vez instalado, lo único que queda por hacer es poner la etiqueta de elemento del Web Component en el directorio app.component.html¿verdad?

Si lo hace, es posible que aparezca un error similar a éste:

Template parse error

Angular quiere saber todo lo que está pasando en la aplicación para que pueda optimizar y ejecutar con el mayor rendimiento posible. Si no es un elemento HTML estándar o un componente Angular, que lanzará un error.

"Creemos que escribir aplicaciones bonitas debe ser alegre y divertido".

- Angular

Obtener errores no es ni alegre, ni divertido y Angular intenta aliviar el dolor con mensajes útiles en esos errores. Sugieren dos posibles respuestas para arreglar nuestro problema. La segunda sugerencia es exactamente lo que tenemos, y ofrece la solución. ¡Eso fue alegre y divertido!

En el archivo app.module.ts, importa el CUSTOM_ELEMENTS_SCHEMA:

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

A continuación, inclúyalo en el objeto decorador @NgModule:

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

El archivo final debería tener este aspecto:

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 {}

Hacer estos cambios permite a Angular saber que si se encuentra con un elemento que no sabe cómo manejar, que no se preocupe por ello.

Ahora, en el archivo app.component.html colocamos el componente del teclado de la siguiente manera:

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

Hablaremos de las partes interiores más adelante, pero por ahora, toma nota de #keypad.

En app.component.tsimportamos ElementRef, ViewChild y nuestro Web Component:

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

El decorador ViewChild se utiliza para encontrar el componente del teclado mediante la función #keypad mencionado anteriormente y crear una keypadComponent referencia de la clase ElementRef.

@ViewChild("keypad") keypadComponent: ElementRef;

Angular tiene ahora una referencia al Web Component y puede enlazar datos y eventos. Veámoslo a continuación.

Tratamiento de datos

La sintaxis para vincular los datos que van en su Web Component es corchetes []. Para las propiedades, se parece a [property]="data". Si es un atributo, [attr.attribute]="data". Hay toda una sección en la documentación sobre la sintaxis de enlace dedicada a los atributos HTML y propiedades DOM.

Tal y como mencionan los resultados de custom-elements-everywhere.com: "Esto funciona bien para datos ricos, como objetos y matrices, y también funciona bien para valores primitivos siempre y cuando el autor del elemento personalizado haya mapeado cualquier atributo expuesto a las propiedades correspondientes."

Echemos un vistazo a nuestro componente de teclado: En app.component.html

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

Las propiedades keys, placeholder y actionText están vinculadas a variables con el mismo nombre (por comodidad). cancelText se establece en la cadena Quit.

A continuación, en app.component.tsestablecemos los valores iniciales de los datos para las propiedades/atributos. Observe cómo los datos de las claves son un array (datos enriquecidos) que se pasan a la propiedad sin necesidad de nada extra.

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

He aquí un ejemplo de cómo cambiar los datos de una propiedad:

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

Gestión de eventos

Puede que haya notado el paréntesis () alrededor de digits-sent. En app.component.html

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

Esta es la sintaxis que Angular utiliza para enlazar con los eventos procedentes del elemento. Le está diciendo a Angular que pase los datos provenientes del evento personalizado digits-sent a nuestra función answerSubmitted que se muestra a continuación: En 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.";
    }
  }
}

¿Y si queremos llamar a un método que el Web Component ha puesto a nuestra disposición? En nuestro ejemplo, sería así: En app.component.ts

this.keypadComponent.nativeElement.cancelAction();

La aplicación está llamando al método cancelAction() del componente del teclado. Tome nota de nativeElement. Que es necesario y proviene de ElementRef.

Uso de Angular para crear componentes web

Ahora, pongámonos meta. A lo largo de esta serie, hemos discutido el uso de Web Components en varios frameworks, pero ¿y si pudiéramos utilizar el framework para crear Web Components? Aquí es donde Elementos Angulares entran en juego. Así que si realmente te gusta Angular, nunca tendrás que dejar el ecosistema.

Conclusión

Angular ha bajado la barrera para conseguir que los Web Components funcionen en sus aplicaciones. Hace honor a la declaración "La plataforma del desarrollador web moderno" de su página de inicio. Tanto es así que si realmente te gusta Angular, ¡puedes usarlo para construir Web Components!

¿Has probado a incorporar Web Components en Angular o los has creado utilizando Angular Elements? Háznoslo saber en nuestro Canal Slack de la Comunidad.