Componentes no Angular
Fala galerinha, blz? Hoje vamos dar continuidade ao assunto e neste artigo entenderemos como componentes funcionam no Angular. Partindo de um novo projeto igual o da aula passada, vamos entender como eles são criados, como é a sua estrutura e vamos implementar um pequena lógica a partir deles.
Como vocês já sabem, atualmente, o Angular é o segundo framework de JavaScript front-end mais usado (O primeiro, se contarmos AngularJs e Angular).
Bom, disso vocês já sabem, mas o que ainda não sabem é que uma das partes mais importantes de um projeto Angular é o que chamamos de componentes, pois eles são a parte lógica da aplicação.
Criando componente com o Angular CLI
Primeiramente, em todos os projetos Angular, usaremos a ferramenta Angular CLI para criar componentes (Se você não lembra que ferramenta é essa, no artigo da aula passada eu explico um pouco, neste link ou no link a baixo). Com ela não precisamos nos preocupar com a estrutura do componente, pois ela adiciona o mesmo ao projeto já com um código inicial automaticamente.
Um componente pode ser criado de forma bastante simples, utilizando o comando ng generate component <nome>.
Exemplo de uso:
O comando acima gerará um novo componente dentro da pasta “src/app” chamado “HeaderComponent”, dentro de uma pasta chamada “header”. O resultado da execução desse comando é:
Observe que além de criar um novo diretório e os quatro arquivos necessários para um componente, esse comando também atualiza o arquivo app.module.ts, com o objetivo de incluir nele os dados necessárias para informar ao Angular sobre esse novo componente.
Esse novo componente que foi criado será composto pelos arquivos “header.component.html”, “header.component.css” e “header.component.ts”, que contém a estrutura do componente.
Como vocês irão ver, o Angular CLI facilita muito na criação de novos elementos, sejam eles componentes, módulos, serviços e etc, pois além de criar os arquivos que o compõem, também registra o componente ou modulo a nível de projeto.
No Angular, todo componente precisa ser registrado em um módulo antes de ser utilizado. O Angular CLI, ao criar o componente, também configura a referência para ele no arquivo app.modules.ts, conforme Código 1, de modo que não precisamos nos preocupar com esse passo.
No código acima vemos a referência ao componente dentro do decorator @NgModule na propriedade declarations. É nela que, a princípio, ficarão quase todos os componentes da nossa aplicação.
Antes que me perguntem “O que é um decorator?”, aqui a resposta.
Estrutura de um Componente
Os componentes são classes escritas em Type Script que recebem o decorator @Component, assim como mostra no Código 2 o componente que criamos com o Comando 1. Vamos analisar esse código juntos ao longo dessa seção, portanto não se preocupe em entendê-lo completamente agora. Atente-se apenas para o fato dele ser uma classe com um decorator, por enquanto.
Para analisarmos esse código precisamos dividi-lo em duas partes:
- Metadata: são definições que iremos informar ao Angular que a nossa classe é um componente, por meio de decorators, nesse caso @Component
- Classe: assim como em qualquer linguagem de programação que utiliza o paradigma da orientação a objeto, possui suas propriedades e métodos
Um componente é um tipo de classe existente em uma aplicação Angular, eles são identificados com o decorator @Component. Neste decorator existem algumas propriedades mais utilizadas como: selector, templateUrl e style. Vamos especificá-las:
- selector é como identificamos o nosso componente. Para todo o componente existe um elemento único associado que permite que ele seja adicionado em um documento HTML. Nesse caso, o nome do elemento desse componente é “app-header” e deve ser escrito como <app-header></app-header>
- templateUrl é o nome do documento HTML que será a parte visual do componente. Nele podemos ter código em HTML juntamente com todos os bindings e diretivas necessários para a exibição do componente no navegador
- template também usado para descrever a parte visual do componente, porém nesse caso podemos fornecer código HTML “hard coded”, como texto
- styleUrl é onde informamos quais folhas de estilo contêm o código CSS que será aplicado ao template do componente.
Com isso podemos concluir que a estrutura de um componente Angular deve ser formada por esses três elementos, template (HTML), estilo (CSS) e classe (TypeScript). Essas partes são organizadas em arquivos separados e unidas nos metadados do componente através do decorator @Component.
No Código 3 vemos uma outra forma de descrever o template do componente usando HTML diretamente na propriedade template, sem a necessidade de criar um arquivo HTML no projeto.
Seguindo o Angular Style Guide como boa prática, o código HTML implementado na propriedade template deve conter poucas linhas. Caso este seja um código mais elaborado é recomendável colocá-lo em um documento HTML, utilizando a propriedade templateUrl para indicar a localização deste arquivo.
Agora que nosso componente esta criado podemos fazer referência a ele em outros componentes do projeto usando o seletor “app-header”. Nesse caso basta colocarmos a tag <app-header></app-header> dentro do HTML do template de outra pagina ou componente.
Utilizando um componente
Agora, utilizaremos o componente “app-header” para entender como ele pode funcionar em uma aplicação. Vamos aprimorar o Código 3 e usaremos o recurso do binding do Angular para exibir a variável name na view.
Para que os valores da variável possa ser exibido na view podemos utilizar a interpolation (interpolação), que consiste em adicionar o nome da variável entre chaves duplas {{ }} dentro do elemento em que o valor da variável deve aparecer.
No arquivo header.component.ts colocaremos a variável name que receberá o valor do input.
Conforme Código 4, criaremos uma variável do tipo string chamada name. A variável terá o modificador de acesso public, já que usaremos em uma view (todo ou parte de uma página web) da aplicação.
Para conseguirmos visualizar o conteúdo da nossa view, visto que não configuramos uma rota no nosso projeto, teremos que fazer uma alteração no arquivo “app.component.html” na raiz da nossa pasta “app”. Excluiremos o conteúdo já existente e colocaremos o seletor do nosso componente app-header para quando carregarmos a aplicação a nossa view possa aparecer, como mostra a Figura 1.
Caso a aplicação esteja em execução, logo a nova página será exibida, do contrário, deverá executar o comando npm start em um terminal dentro da pasta do nosso projeto.
Conclusão
Os componentes são uma parte importante de toda aplicação Angular, pois é neles que criamos a lógica por trás do funcionamento das views. Os componentes angulares são modularizados, permitindo que os usuários criem vários componentes simples e facilmente substituíveis para criar componentes mais complexos, que separam bem a lógica e a apresentação(view).
Mas antes de sair criando componentes por ai, esteja atento, pois existe uma linha tênue entre fazer componentes ou copiar o código. Você deve prestar muita atenção nisso, pois pode ser que depois de vários componentes criados você chegue no ponto que costumo chamar de “Inception”.
“Eu crio um componente que agrega 3 componentes e cada componente tem mais 3 componentes dentro, e depois de muitos componentes eu caio no limbo e esqueço que componente esta dentro de qual componente e termino sem saber de mais nada”.
Ou seja, ao invés de facilitar o seu trabalho, você está criando um monstro que obrigatoriamente vai te dar mais trabalho do que a própria demanda.
Em suma neste artigo vimos como os componentes são criados, estruturados e como implementá-los em um projeto. Também vimos como podemos configurar uma variável dentro de um componente e fazer com que o seu valor seja visualizado em um template.
