Usando Web Components em um aplicativo Angular: uma experiência agradável e divertida

Este tutorial faz parte da nossa série sobre Componentes da Web !! Usaremos o mesmo Web Component que criamos para a série e mostraremos como utilizá-lo em um aplicativo Angular.

De acordo com o site do Angular site, “Estamos construindo uma plataforma para o futuro.” Existe uma maneira Angular de desenvolver Applications, e ela já vem com praticamente tudo o que você precisa integrado.

Os Web Components fazem parte dessa plataforma do futuro?

De acordo com os testes realizados por custom-elements-everywhere.com, o futuro parece bastante promissor.

Custom-Elements-Everywhere.com Angular results

O Angular foi aprovado em todos os testes com uma pontuação total de 100%. Isso significa que a forma como o Angular lida com dados e eventos é totalmente compatível com os Web Components.

Vamos dar uma olhada em um trecho de código. Aqui está o aplicativo que vamos desenvolver: Angular Answers. Você sabe a resposta?

Incorporando o componente da Web ao Angular

Nos posts anteriores desta série, havia duas maneiras possíveis de incluir o Web Component:

• Instale o pacote usando o npm

• link para um CDN que hospeda o pacote

Com o Angular, só a instalação do pacote via npm funcionou para mim. Se alguém tiver alguma ideia do porquê de a ligação a um CDN não ter funcionado, por favor, me avise. Por enquanto, vai ser o `npm install`.

npm install @dwane-vonage/dwanes-keypad

Fazer com que o Angular reconheça o Web Component

Depois de instalado, basta colocar a tag do elemento do Web Component dentro do app.component.html, certo?

Faça isso e você poderá ver um erro semelhante a este:

Template parse error

O Angular precisa saber tudo o que está acontecendo no aplicativo para poder otimizá-lo e executá-lo com o máximo de desempenho possível. Se não for um elemento HTML padrão ou um componente do Angular, isso gerará um erro.

“Acreditamos que criar aplicativos bonitos deve ser uma experiência alegre e divertida.”

- Angular

Receber erros não é nem agradável nem divertido, e o Angular tenta amenizar o incômodo com mensagens úteis nesses erros. Ele sugere duas possíveis soluções para resolver nosso problema. A segunda sugestão é exatamente o que temos, e ela oferece a solução. Isso foi ao mesmo tempo agradável e divertido!

No arquivo app.module.ts, importe o CUSTOM_ELEMENTS_SCHEMA:

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

Em seguida, inclua-o no objeto decorador @NgModule:

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

O arquivo final deve ficar mais ou menos assim:

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

Fazer essas alterações permite que o Angular saiba que, caso se depare com um elemento que não saiba como tratar, não precisa se preocupar com isso.

Agora, no app.component.html arquivo, colocamos o componente do teclado da seguinte maneira:

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

Falaremos sobre as peças internas mais tarde, mas, por enquanto, preste atenção a #keypad.

No app.component.ts, importamos ElementRef, ViewChild e nosso Web Component:

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

O decorador ViewChild é usado para localizar o componente do teclado, utilizando o #keypad mencionado anteriormente e criar uma keypadComponent referência da classe ElementRef.

@ViewChild("keypad") keypadComponent: ElementRef;

O Angular agora possui uma referência ao Web Component e pode se vincular a dados e eventos. Vamos ver isso a seguir.

Tratamento de dados

A sintaxe para vincular os dados que são inseridos no seu Componente Web é o uso de colchetes []. Para propriedades, o formato é [propriedade]="dados". Se for um atributo, [attr.atributo]="dados". Há uma seção inteira na documentação sobre a sintaxe de vinculação dedicada a atributos HTML e propriedades DOM.

Assim como mencionam os resultados do site custom-elements-everywhere.com: “Isso funciona bem para dados complexos, como objetos e matrizes, e também funciona bem para valores primitivos, desde que o autor do elemento personalizado tenha mapeado quaisquer atributos expostos às propriedades correspondentes.”

Vamos dar uma olhada no nosso componente de teclado: Em app.component.html

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

As propriedades keys, placeholder e actionText estão vinculadas a variáveis com o mesmo nome (por conveniência). cancelText é definida como a string Quit.

Em seguida, em app.component.ts, definimos os valores iniciais dos dados para as propriedades/atributos. Observe que os dados das chaves são um array (dados avançados) que é passado para a propriedade sem a necessidade de nada adicional.

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

Aqui está um exemplo de como alterar os dados de uma propriedade:

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

Tratamento de eventos

Você deve ter notado os parênteses () em torno de digits-sent. Em app.component.html

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

Essa é a sintaxe que o Angular usa para se vincular aos eventos provenientes do elemento. Ela instrui o Angular a passar os dados provenientes do digits-sent para a nossa answerSubmitted função apresentada abaixo: Em 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.";
    }
  }
}

E se quisermos chamar um método que o Componente Web disponibilizou? No nosso exemplo, ficaria assim: Em app.component.ts

this.keypadComponent.nativeElement.cancelAction();

O aplicativo está chamando o método cancelAction() . Observe nativeElement. Isso é necessário e vem do ElementRef.

Usando o Angular para criar componentes da Web

Agora, vamos entrar no nível meta. Ao longo desta série, discutimos o uso de Web Components em várias estruturas, mas e se pudéssemos usar a própria estrutura para criar Web Components? É aí que entram os os Angular Elements entram em cena. Portanto, se você realmente gosta do Angular, não precisa sair do ecossistema.

Conclusão

O Angular reduziu as dificuldades para implementar Web Components em suas applications. Ele faz jus ao slogan “A plataforma do desenvolvedor web moderno”, presente em sua página inicial. Tanto é assim que, se você realmente gosta do Angular, pode usá-lo para criar Web Components!

Você já tentou incorporar Web Components no Angular ou criá-los usando o Angular Elements? Conte para a gente no nosso canal da Comunidade no Slack.