Angular 19: diretivas, projeção de conteúdo e interações com o DOM

Embarcando no projeto - Apresentação

Introdução ao Curso de Angular

Olá! Boas-vindas a mais este curso de Angular. Meu nome é Antônio Avaldo e serei o instrutor nesta jornada de aprendizado.

Audiodescrição: Antônio é um homem branco, usa óculos arredondados, tem bigode e cavanhaque, e cabelos cacheados e volumosos na altura dos ombros. Ele veste uma camisa branca e, ao fundo, há uma parede iluminada nas cores azul e rosa.

Apresentação da Aplicação Base

Se estamos nesta jornada de aprendizado do Angular e desejamos avançar ainda mais em nossos conhecimentos, este curso é ideal. Vamos observar a aplicação que desenvolveremos. Inicialmente, apresento a aplicação básica com a qual iniciaremos o curso. Isso é importante porque, no mercado, é comum ingressarmos em uma empresa e nos integrarmos a um projeto já existente, no qual o time espera que implementemos novas funcionalidades e recursos. É exatamente isso que faremos neste curso.

Vamos trabalhar com uma aplicação já com uma base pronta, chamada Polpep. Ela já possui várias estilizações, HTML, CSS e até alguns elementos em TypeScript. Vamos dar uma rápida olhada nela. A aplicação exibe o saldo disponível e permite que a pessoa usuária registre suas movimentações financeiras e contas bancárias. Trata-se de uma ferramenta de documentação e controle financeiro pessoal. Atualmente, todas as informações de movimentações e contas são estáticas, sem integração ou transações reais nas contas. Inclusive, os botões de adicionar conta e adicionar transação ainda não estão funcionando.

Visão Geral da Versão Final da Aplicação

Agora, vamos ver a versão final da aplicação, que é onde chegaremos ao final deste curso. Ao abrir outra aba do navegador, já notamos uma diferença. No caso do saldo disponível, há um ícone. Vamos ver como isso impactará o conteúdo do curso. A lista de transações e de contas está vazia por enquanto. Vamos realizar alguns testes. Ao clicar no botão de adicionar uma nova conta, um novo modal aparece. Desenvolveremos esse modal ao longo do curso. Podemos adicionar um novo banco, que chamaremos de NBank, com saldo inicial de zero.

Ao clicar para adicionar esse banco, ele é adicionado à nossa lista de contas com o saldo especificado. Isso será implementado ao longo do curso. Agora, vamos fazer uma nova transação. Clicamos no botão de adicionar transação. Não é necessário colocar o nome dela; vamos definir que é um depósito de 500 reais. Colocamos uma data qualquer e selecionamos a conta NBank que acabamos de criar. Clicamos no botão de adicionar e observamos que a transação foi registrada na lista de movimentações financeiras. Está com a cor verde porque é um depósito, indicando a data em que foi realizada. O saldo do banco foi atualizado automaticamente, assim como o saldo total disponível.

Vamos realizar mais um teste. Adicionaremos mais uma transação, um saque de 100 reais, também na conta NBank. Adicionamos essa transação e observamos que o saque ficou destacado em vermelho. Veremos no código como implementar isso. Toda a aplicação está bem integrada. Podemos adicionar novas contas com saldo inicial e realizar novas transações. Tudo está muito bem integrado, e veremos exatamente como isso é feito no código.

Conteúdo do Curso e Pré-requisitos

Com este projeto, abordaremos o seguinte conteúdo do Angular: como criar diretivas personalizadas para reutilizar comportamento em diferentes componentes; o uso de ng-content para realizar projeção de conteúdo, desde casos básicos até alguns mais intermediários; viewChild e variáveis de template para interagir diretamente com elementos do DOM, especificamente o modal que utiliza o elemento dialog do HTML; modelSignal, um recurso da API de Signals para manter dois sinais de dois componentes diferentes sincronizados; e, por fim, o uso de computed com múltiplas dependências. É um conteúdo extenso e estamos ansiosos para compartilhar tudo isso.

É importante que já tenhamos alguns pré-requisitos: familiaridade com HTML, CSS, TypeScript e o básico de Angular, incluindo comunicação entre componentes com inputs e outputs, além de algum conhecimento da API de Signals, como o computed. Tudo bem? Então é isso. Esperamos vocês no curso para estudarmos juntos.

Embarcando no projeto - Baixando o projeto

Introdução ao Projeto Polpep

Vamos começar a explorar o projeto Polpep, que já possui uma base pronta desenvolvida pelo time de front-end. Nosso objetivo é implementar melhorias nessa aplicação. Primeiro, precisamos baixar o projeto do GitHub. Para isso, acessamos o link do projeto, clicamos no botão verde "Code" e escolhemos "Download Zip" para baixar o projeto no computador.

Preparação do Ambiente de Desenvolvimento

Após baixar o projeto, descompactamos o arquivo Zip e renomeamos a pasta descompactada para POPEP. Em seguida, abrimos essa pasta no VS Code usando a opção "Abrir com Code". Essa prática de trabalhar com projetos já em andamento é comum no mercado de trabalho, onde precisamos nos ambientar rapidamente para implementar novos recursos.

Instalação de Dependências

Com o projeto aberto no VS Code, o próximo passo é instalar as dependências necessárias. Para isso, abrimos o terminal integrado com "Ctrl + Aspas Simples" e digitamos o seguinte comando:

npm install

Esse comando é essencial sempre que baixamos um projeto Angular diretamente do GitHub, pois ele instala as dependências que não vêm automaticamente. A execução do npm install pode demorar um pouco, então podemos minimizar o terminal enquanto exploramos a estrutura do projeto.

Estrutura do Projeto

A estrutura do projeto segue as convenções do Angular, com pastas como public, que contém imagens e ícones, e src, que é a mais importante. Dentro de src, encontramos a pasta app, que é o componente raiz, contendo arquivos HTML, CSS e TypeScript. A pasta app possui subpastas como "apresentação", "área financeira", "barra lateral" e "compartilhados". A pasta "compartilhados" é uma convenção comum, chamada de "shared" em inglês, e contém componentes reutilizáveis.

Dentro da pasta "área financeira", encontramos componentes como contas, saldo e transações, além de uma subpasta "compartilhados" para arquivos compartilhados apenas dentro desse componente. Essa estrutura segue um guia de estilos do Angular, que recomenda boas práticas de construção de projetos.

Inicialização do Servidor de Desenvolvimento

Após a instalação das dependências, verificamos que a pasta node_modules foi criada. Agora, podemos iniciar o servidor de desenvolvimento. Para isso, voltamos ao terminal e digitamos:

npm start

Esse comando executa o script start especificado no arquivo package.json, iniciando a aplicação em um servidor local. O processo pode demorar um pouco, mas logo o terminal nos fornecerá o link para acessar a aplicação: http://localhost:4200.

Acesso e Próximos Passos

Podemos abrir esse link no navegador, e a aplicação já estará rodando. Ela possui uma base bem estruturada, com componentes como a barra lateral, a apresentação e as finanças do dia. No entanto, os dados são estáticos, e os botões de adicionar transação e conta ainda não têm funcionalidade. Essas são algumas das melhorias que implementaremos no curso.

No próximo vídeo, exploraremos mais detalhes sobre o projeto. Até lá!

Embarcando no projeto - Projeção de conteúdo com ng-content

Introdução e Identificação do Problema

Nós já baixamos a aplicação do GitHub, a aplicação base, na qual precisamos aplicar algumas melhorias. Vamos mostrar a primeira delas agora. Se descermos um pouco nos cards de transações e de contas, encontramos um botão de adicionar transação e um botão de adicionar conta, ambos apenas com texto. No entanto, ao abrir o Figma da aplicação, verificamos que esses mesmos botões possuem ícones. Por exemplo, o botão de adicionar transação tem um ícone de moeda, e o botão de adicionar conta tem um ícone de carteira. Como podemos implementar esses ícones nos botões?

Análise do Código Atual

Primeiro, precisamos analisar o código. Vamos abrir o VS Code e explorar a estrutura. Dentro da pasta "App", na pasta "Compartilhados", encontramos a pasta de botão. No HTML, o botão é apenas um elemento com duas classes e uma interpolação com um signal, texto, que é um signal de entrada.

<button class="botao texto-md">
  {{ texto() }}
</button>

No arquivo TypeScript do botão, esse texto é um input.required.

export class BotaoComponent {
  texto = input.required<string>();
}

Implementação de Ícones nos Botões

Para incluir uma imagem ou ícone no botão, poderíamos adicionar uma imagem antes do texto e receber o src e o alt como entradas. No entanto, surgem algumas questões: e se a pessoa não quiser sempre passar um ícone? Nesse caso, precisaríamos usar um @F para imprimir uma imagem condicionalmente. E se a pessoa quiser passar o ícone depois do texto? Isso exigiria mais condicionais, aumentando a complexidade do código interno do botão.

Existe uma forma mais direta de fazer isso. Vamos remover o input de texto no arquivo TypeScript, salvar o arquivo e voltar ao HTML.

export class BotaoComponent {

}

Removeremos a interpolação e, dentro da tag button, utilizaremos uma tag especial chamada ng-content. Essa tag pode ser deixada com abertura e fechamento ou apenas como uma tag de auto-fechamento. Ng-content significa conteúdo e é uma tag especial do Angular.

<button class="botao texto-md">
  <ng-content></ng-content>
</button>

Ajustes no Componente de Transações

Ao salvar o arquivo e voltar ao navegador, os botões ficam sem conteúdo. Vamos corrigir isso. No VS Code, vamos aos locais que consomem esses botões. Na pasta "área financeira", abrimos o componente de transações e seu HTML. Na linha 20, encontramos o app-botao com uma classe externa e o input de texto, que não estamos mais utilizando. Vamos apagar esse input de texto e modificar a tag de auto-fechamento para uma tag com abertura e fechamento para o app-botao.

<app-botao class="botao-adicionar-transacao">

</app-botao>

Dentro deste componente, vamos adicionar a transação. Colocaremos o texto "Adicionar Transação".

<app-botao class="botao-adicionar-transacao">
  Adicionar transação
</app-botao>

Ao salvar o arquivo e retornar ao navegador, o texto já estará inserido dentro do botão. Esta técnica é conhecida como projeção de conteúdo no Angular. Estamos projetando conteúdo a partir do componente que consome, e este componente projeta o conteúdo dentro do componente que está sendo consumido, que é o botão. Há uma passagem de informações semelhante ao input. A diferença é que o input pode receber apenas dados JavaScript, enquanto que, utilizando o ng-content, conseguimos passar qualquer HTML. Inicialmente, passamos um texto, mas agora também passaremos uma imagem.

Antes do texto, inseriremos a tag img com a classe ícone-moeda. Preencheremos o src e o alt dela. O src será ícones/moeda.svg, e o alt será deixado como aspas vazias. É importante deixar o alt como aspas vazias, pois este ícone é puramente decorativo. Não é necessário um texto para acessibilidade, e, ao deixar as aspas vazias, os leitores de tela ignorarão essa imagem.

<app-botao class="botao-adicionar-transacao">
  <img src="icones/moeda.svg" alt="" class="icone-moeda">
  Adicionar transação
</app-botao>

Após salvar o arquivo e retornar ao navegador, a moeda aparecerá junto com o texto, mas estará um pouco grande. Ajustaremos o tamanho dela. No VSCode, abriremos o arquivo CSS do componente de transações e, no final do arquivo, adicionaremos o código que já temos preparado. Este código ajusta a classe ícone-moeda para uma largura de 1rem.

.icone-moeda {
  width: 1rem;
}

Ao salvar o arquivo e retornar ao navegador, a moeda estará com o tamanho correto.

Ajustes no Componente de Contas

Faremos o mesmo para o botão de adicionar uma conta. No VSCode, abriremos o explorador, a pasta "contas", e o HTML dela. No final do arquivo, temos o mesmo tipo de código. Removeremos o input e inseriremos o texto "Adicionar Conta" diretamente na tag do botão.

<app-botao class="botao-adicionar-conta">
  Adicionar conta
</app-botao>

Ao salvar o arquivo e retornar ao navegador, o texto "Adicionar Conta" aparecerá. Agora, adicionaremos a imagem antes deste texto. Usaremos img.ícone-carteira, com src como ícones/carteira.svg e alt vazio.

<app-botao class="botao-adicionar-conta">
  <img src="icones/carteira.svg" alt="" class="icone-carteira">
  Adicionar conta
</app-botao>

Aproveitaremos para abrir o CSS deste componente. Após salvar o arquivo HTML, abriremos o CSS e ajustaremos a classe ícone-carteira para uma largura de 1rem.

.icone-carteira {
  width: 1rem;
}

Ao salvar o arquivo e retornar ao navegador, se o ícone não aparecer, verificaremos se a extensão .svg foi corretamente adicionada ao src. Após corrigir, o ícone aparecerá.

Conclusão

Com isso, nossos botões estarão mais visualmente elegantes, de acordo com o Figma, tornando-os mais atrativos para o usuário. O ng-content permite que passemos qualquer HTML como conteúdo de um componente, possibilitando a criação de componentes mais reutilizáveis do que apenas utilizando a técnica de inputs.

Sobre o curso Angular 19: diretivas, projeção de conteúdo e interações com o DOM

O curso Angular 19: diretivas, projeção de conteúdo e interações com o DOM possui 180 minutos de vídeos, em um total de 61 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Embarcando no projeto
• Trabalhando com diretiva personalizada
• Avançando no ng-content no Card
• Construindo um modal
• Dinamizando os modais
• Realizando integrações entre os dados