Usar Elementos Angulares – Porquê e Como? – Parte 1
Arrancar
Comecemos por criar um novo Projecto Angular no nosso sistema. Para isso, certifique-se de ter a última versão do Angular CLI instalada. Execute o seguinte comando no seu terminal:
$ npm install -g @angular/cli
Após esta instalação estar completa, podemos usá-la para criar uma nova aplicação inicial no nosso sistema como esta:
$ ng new angular-app
Pede-lhe então para seleccionar as funcionalidades adicionais que pode querer adicionar ao seu projecto Angular, coisas como routing e o tipo de formato de folha de estilo. Selecione a resposta padrão pressionando a tecla Enter/Return key.
A CLI instala os pacotes e dependências Angulares necessários em uma pasta chamada angular-app. Você pode servir esta aplicação no navegador executando os seguintes comandos:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Como você pode ver, a aplicação já contém algumas coisas que podemos exibir na tela. Mas nós não precisamos delas. Então volte ao seu editor de código (I ❤️ VS Code) e apague tudo dentro de src/app/app.component.html file e escreva um único <h1> element.
<h1>Welcome To Angular Elements!</h1>
Se você der uma olhada na estrutura do arquivo, você verá que cada componente em angular consiste de uma multidão de arquivos. Apenas para o componente App, existe um ficheiro .ts, .html, .css, e um ficheiro spec.ts que contém os testes, e um ficheiro module.ts. Haverá também um arquivo opcional routing.module.ts se você tivesse escolhido adicionar o recurso de roteamento à aplicação enquanto a criava usando o CLI.
Em vez de escrever todos esses arquivos para nossos componentes, o CLI Angular nos dá um método de abreviação que irá gerar esses arquivos para nós. Vamos usar este método para criar um componente HelloWorld no nosso sistema.
$ ng g c HelloWorld
Este único comando irá criar uma pasta chamada hello-world dentro da pasta app. Se você abrir este arquivo, você encontrará estes 4 arquivos dentro dele:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Estaremos usando somente o arquivo .html e .ts. Há bandeiras adicionais que podemos passar para o comando ng g c. Mas para manter as coisas simples e apontar, eu não as usarei. Verifique Angular Docs para saber mais sobre como usar este comando.
Dentro do arquivo hello-world.component.ts, você verá que o selector está configurado para app-hello-world. Então, se você adicionar isto ao arquivo app.component.html assim:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Então o conteúdo de hello-world.component.html será exibido no navegador.
A nossa configuração inicial está agora pronta. Vamos começar com como usar Elementos Angulares.
Converter um componente em Elemento Personalizado
Direito agora, temos um simples componente HelloWorld que simplesmente imprime algum texto na tela. Vamos dar uma olhada em como podemos inserir este componente no aplicativo de uma forma mais dinâmica. Para fazer isso, vamos substituir o app-hello-world por um div e um button. Vamos também adicionar o click ouvinte ao button, para que quando alguém clicar no botão, o componente HelloWorld possa ser exibido. Isto será tratado por uma função showMessage(). Então vá para a página app.component.html e faça estas alterações:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Precisamos então definir a função showMessage() no arquivo app.component.ts. Aqui vamos usar a manipulação regular do DOM para obter o div selecionando-o usando seu id de hello. Então, vamos aplicar a função innerHTML para inserir o componente app-hello-world assim:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Você pode ir ao seu navegador e clicar no botão, mas eu vou lhe dizer agora mesmo que nada vai acontecer. Mas novamente, se você for às ferramentas dev do navegador e olhar lá, você verá que o componente HelloWorld está inserido.
A razão pela qual não podemos ver o componente na tela é que Angular não consegue reconhecer a tag app-hello-world já que foi inserida dinamicamente no template. Angular precisa de todos os elementos para estar presente no template, ou você precisa usar a fábrica de componentes dinâmicos para instanciar o componente em tempo de execução através do seu código.
É aqui que os Elementos Angulares entram em jogo. Usando Angular Element, tudo o que precisamos fazer é inserir a tag dinamicamente, e Angular em si vai instanciar o componente para nós. Vamos finalmente ver como usar este componente na nossa aplicação. Primeiro, use o comando ng add para instalar Angular Elements na nossa aplicação:
$ ng add @angular/elements
Após ter isto instalado, vá para app.module.ts e faça as seguintes alterações no @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Então na classe AppModule, escreva uma função constructor crie uma nova instância do createCustomElement e passe-lhe o HelloWorldComponent como mostrado abaixo:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Enquanto o componente, também temos de passar-lhe o injector. O injector é algo que usamos para resolver as dependências. Com isso, criamos uma instância do HelloWorldComponent como um elemento personalizado. Podemos então usar a API customElements para definir a tag do componente como app-hello-world.
customElements.define('app-hello-world', custom);
Voltar para o arquivo hello-world.component.ts e remover/comentar o selector dentro da seção @Component. Desta forma, Angular não ficará confuso e saberá usar o elemento personalizado que acabamos de criar.
Executar o comando ng serve --open para ter certeza de que Angular aceita todas as alterações que acabamos de fazer.
Há uma boa chance de que o botão ainda não exiba o HelloWorldComponent. Isto pode ser porque Angular “falha na construção do HTMLElement”. Para resolver este problema, instale o webcomponentjs polyfills:
$ yarn add @webcomponents/webcomponentsjs
Então, vá para o arquivo polyfills.ts e importe o seguinte:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Finalmente! Nosso elemento personalizado será exibido na tela quando clicarmos nesse botão.
