Angular 19: estruture componentes com signals e controle de fluxo

Conhecendo o Angular - Apresentação

Que tal aprender a criar a sua primeira aplicação com Angular? Eu sou a Nayanne Batista e irei te acompanhar ao longo dessa jornada de aprendizagem!

Audiodescrição: Nayanne se descreve como uma mulher de pele morena, com olhos castanho-escuros, cabelo liso e longo castanho-escuro, e sobrancelhas castanho-escuras. Ela veste uma camisa laranja, e está sentada em frente a uma estante branca iluminada em gradiente azul e rosa, contendo livros e enfeites. Ao fundo, à esquerda da instrutora, há um violão preto.

O que vamos aprender?

Neste curso, iremos aprender a criar uma aplicação com Angular do zero. Desenvolveremos a aplicação Organo, um organizador de leituras favoritas. Na sequência, entenderemos como aplicar a componentização no Angular, utilizando o Angular CLI para criar componentes. A partir disso, vamos compreender como associar dados a esses componentes.

Também aprenderemos como ocorre a comunicação entre os componentes no Angular, explorando diretivas, o novo control flow (fluxo de controle) do Angular para renderizar cards, e fazendo uma estilização condicional. Para concluir, aprenderemos a implementar a funcionalidade de favoritar livros, entre vários outros conteúdos que serão abordados durante as aulas.

Quais são os requisitos?

Quais são os conhecimentos necessários para melhor aproveitamento do curso?

É importante que você tenha como pré-requisitos conhecimentos básicos em HTML e CSS, JavaScript e TypeScript, linguagem utilizada pelo Angular.

Conclusão

Estamos muito animados para começar! Vamos mergulhar no Angular?

Conhecendo o Angular - Criando um projeto com Angular 19

• Forbes;
• Gmail;
• PayPal;
• Samsung;
• E Microsoft.

O que essas aplicações têm em comum? Todas foram criadas utilizando o framework Angular.

Essa informação nos permite perceber que o Angular é um framework utilizado para criar grandes aplicações, robustas e seguras, em todo o mundo. Se você tem interesse em entender por que ele é tão utilizado, por que foi escolhido para criar essas e tantas outras aplicações, e se tem curiosidade de saber como criar sua própria aplicação, este curso é o lugar certo.

Criando um projeto com Angular 19

Acessando o protótipo no Figma

Nosso desafio neste curso será criar um organizador de leituras.

Podemos acessar o protótipo no Figma para visualizar o projeto.

No Figma, temos o Organo, um organizador de leituras onde podemos organizar nossas leituras favoritas por gêneros, como literatura, poesia, entre outros.

Você pode modificar os gêneros utilizados e personalizar a sua aplicação, substituindo livros por filmes ou séries favoritos, por exemplo. Use sua criatividade!

Como criar uma aplicação com Angular?

Precisamos utilizar o Angular para criar essa SPA (Single Page Application). Para criar uma aplicação Angular, seria necessário estruturar uma série de pastas e arquivos de configuração antes de começar a codificar. No entanto, o Angular disponibiliza ferramentas para auxiliar na criação do projeto. Começaremos instalando essas ferramentas para iniciar a codificação.

Instalando o Node

Para começar, criaremos uma pasta chamada curso-organo.

Você também deve criar uma pasta no seu computador para armazenar o projeto. Após fazer isso, vamos clicar sobre a pasta criada com o botão direito e selecionar a opção "Abrir no Terminal".

Feito isso, estamos prontos para instalar a ferramenta do Angular que ajudará a criar o projeto. Primeiramente, é necessário ter o Node instalado, pois usaremos o npm, um gerenciador de pacotes para baixar a ferramenta do Angular. Para verificar se o Node está instalado, executamos:

node -v

Retorno do comando:

v22.11.0

Se o Node estiver instalado, a versão será exibida, como a v22.11.0 no exemplo acima. Caso contrário, será necessário instalar o Node acessando o site Node.js e fazendo o download da versão LTS. Após a instalação, conseguiremos utilizar o npm normalmente.

Instalando o Angular CLI

Finalizada a instalação do Node, vamos acessar a documentação do Angular. Embora a documentação anterior ainda exista, é recomendado utilizar a nova, que nos guiará neste curso.

Importante! Devemos nos acostumar a navegar pela documentação, pois ela centraliza todas as informações e atualizações do framework.

Na documentação, clicaremos em "Docs > Installation" no menu lateral esquerdo. A documentação nos mostra os pré-requisitos necessários, como o Node.js a partir da versão 18.19.1 e um editor de código, como o VS Code. Agora, precisamos instalar o Angular CLI. O comando para instalação é:

npm install -g @angular/cli

Uma vez copiado o comando, basta colar no terminal para realizar a instalação.

O npm é o gerenciador de pacotes que será instalado. Usamos o parâmetro -g para realizar uma instalação de forma global. Por fim, o @angular/cli é a ferramenta que nos auxiliará na criação do projeto. Com esse comando, será instalada a versão mais atual do Angular.

Caso deseje uma versão específica, ou se estiver realizando o projeto quando já existirem versões superiores, você pode especificar a versão desejada.

Para isso, após cli, digitamos @19.1, por exemplo:

npm install -g @angular/cli@19.1

Ao pressionar "Enter", o Angular começará a baixar todos os pacotes da CLI. Finalizada a instalação, podemos verificar qual foi a versão baixada. Primeiro, limparemos o terminal com clear:

clear

Em seguida, digitamos o comando para verificar a versão do Angular CLI instalada:

ng version

Retorno do comando:

Angular CLI: 19.1.3
Node: 22.11.0
Package Manager: npm 11.0.0
OS: win32 x64

Nesse caso, a versão do Angular CLI instalada foi a 19.1.3. A versão do Node é a 22.11.0 e a versão do npm é 11.0.0. Recomendamos usar essas mesmas versões.

As versões do Angular são retrocompatíveis, mas pode haver diferenças de estrutura, arquivo ou comportamento caso a versão do Angular seja diferente.

Criando o projeto

Com o Angular CLI instalado, vamos limpar novamente o terminal com clear. Feito isso, retornaremos à documentação do Angular para entender como criar um novo projeto. De acordo com a documentação, o comando para criar um novo projeto é ng new seguido do nome do projeto.

No terminal, executaremos o seguinte comando:

ng new organo

Ao executar, será exibida uma pergunta no terminal sobre qual formato de estilo desejamos utilizar. Podemos utilizar as setas para cima e para baixo para navegar e escolher entre CSS ou pré-processadores, como SCSS e Sass. Nesse caso, escolheremos a opção CSS.

Feito isso, surge uma segunda pergunta sobre habilitar o Server-Side Rendering (SSR) e o Static Site Generation (SSG). Responderemos "Não", pois não usaremos recursos avançados agora.

Observação: na plataforma da Alura, existem cursos específicos sobre esses temas, que podem ser incluídos posteriormente na sua lista de estudos.

Ao finalizar esse processo no terminal, o Angular CLI começará a criar a estrutura de pastas e arquivos de configuração necessários para a aplicação.

Abrindo o projeto no VS Code

Uma vez concluída a criação do projeto, uma mensagem indica que os pacotes foram instalados com sucesso e que podemos acessar o projeto. Para isso, executaremos:

cd organo

Após entrar na pasta do projeto, vamos abri-lo no VS Code com o comando:

code .

No menu lateral à esquerda, temos a estrutura inicial de um projeto em Angular. A pasta principal é a "ORGANO", que corresponde à área de trabalho. Nela, encontramos o projeto propriamente dito.

O Angular CLI cria uma estrutura com vários arquivos de configuração do TypeScript e dependências. Dessa forma, não precisamos nos preocupar em fazer isso manualmente.

O Angular CLI é uma ferramenta que significa command-line interface (interface de linha de comando), que nos auxilia não apenas na criação do projeto, mas também na criação de vários arquivos Angular, como componentes, serviços, pipes e diretivas. Ela também ajuda na parte de build, testes e deploy. Trata-se de uma ferramenta bastante útil e seguimos as boas práticas recomendadas durante sua aplicação, por ser disponibilizada oficialmente.

Conclusão

Com a estrutura inicial pronta, no próximo vídeo, vamos executar a aplicação para verificar como é a aparência inicial de um projeto Angular. Nos encontramos na sequência!

Conhecendo o Angular - Criando o primeiro componente com Angular 19

No vídeo anterior, criamos a aplicação, mas ainda não verificamos como ela está visualmente, ou seja, qual é a aparência inicial de um projeto Angular.

Criando o primeiro componente com Angular 19

Foram criadas diversas partes e arquivos diferentes. Neste primeiro momento, não é necessário se preocupar com cada um deles, pois muitos não serão modificados. Utilizaremos a configuração padrão do Angular e, à medida que o projeto evoluir, entenderemos os arquivos principais. Também disponibilizaremos uma atividade explicando os principais arquivos, suas funções e configurações.

Executando a aplicação

Para começar, vamos executar a aplicação com o comando ng serve. O ng são a segunda e a terceira letras de Angular. Esse comando executará a aplicação, servindo-a localmente.

ng serve

A aplicação será executada e poderá ser acessada em http://localhost:4200/.

Acessando a página da aplicação

Na página inicial, temos o texto "Hello, organo", que é o nome da aplicação. Abaixo, temos o subtítulo "Congratulations! Your app is running.", indicando que o aplicativo está em execução. Na lateral direita, há diversos links da documentação que podemos acessar.

Desenvolvendo o projeto

Finalizada a criação da aplicação, precisamos começar a desenvolver o projeto. No Figma, podemos analisar como estruturar essa aplicação. O protótipo é composto por diversos blocos diferentes.

Por exemplo: temos um cabeçalho com o logotipo da aplicação, a frase "Suas leituras favoritas organizadas em um só lugar!" à esquerda, e uma imagem à direita. Abaixo, há um título seguido de algumas estruturas, como uma lista de cards. No card, temos uma imagem, um título, uma autoria e um ícone de coração. Ao final da página, encontramos um rodapé.

Podemos começar a estruturar a aplicação dividindo-a em diversos blocos e, posteriormente, juntando-os como se fosse uma brincadeira de Lego.

Cada pedaço da aplicação pode ser denominado como componente.

O Angular é um framework baseado em componentes, então nos preocuparemos com pequenos pedaços de código e, em seguida, faremos a junção. O cabeçalho, por exemplo, pode ser um componente, assim como o card, um botão, o rodapé, uma lista, entre outros.

Criando o componente de cabeçalho

A partir de agora, iniciaremos o processo de componentização da nossa aplicação. Podemos começar por componentes mais simples, como o cabeçalho, adicionando a imagem e visualizando-a renderizada na aplicação. Para criar um componente no VS Code, podemos utilizar a CLI, que nos auxilia tanto na criação do projeto quanto na criação de outros arquivos.

Antes disso, no terminal, precisamos parar a execução da aplicação. Faremos isso com o comando:

CTRL + C

Para criar um novo componente, utilizamos o comando ng generate component e especificamos o caminho onde queremos que o componente seja criado.

Se passarmos apenas o nome do componente, por exemplo, cabecalho, ele será criado na pasta "src > app". No entanto, queremos uma pasta específica para os componentes, então antes do nome do componente, passaremos o nome da pasta, que será componentes seguido de uma barra (/).

ng generate component componentes/cabecalho

Ao pressionar "Enter", o componente é criado, gerando quatro arquivos:

1. cabecalho.component.html
2. cabecalho.component.spec.ts
3. cabecalho.component.ts
4. cabecalho.component.css

Ao acessarmos o menu lateral esquerdo, dentro de "app", encontramos a pasta "componentes", onde está a pasta "cabecalho", contendo os quatro arquivos criados.

Ajustando o código HTML do cabeçalho

Inicialmente, vamos acessar o arquivo cabecalho.component.html, que é o código HTML do cabeçalho. Por padrão, ele vem com um parágrafo na primeira linha:

cabecalho.component.html:

<p>cabecalho works!</p>

Podemos deletá-lo e, em vez disso, utilizar a tag header com a classe (class) banner. Dentro de header, passaremos a tag img, com os atributos src e alt, onde definiremos a imagem do banner e o texto alternativo. Para adicionar a imagem, basta arrastar o arquivo banner.png para a pasta "public". Em seguida, passaremos o nome da imagem para o atributo src.

Por último, no atributo alt, colocaremos o texto "Organizador de leituras".

Importante! Todas as imagens utilizadas no curso estão na atividade Preparando o ambiente. Você deve armazená-las na pasta "public" do seu projeto.

<header class="banner">
  <img src="banner.png" alt="Organizador de leituras">
</header>

Ajustando o código CSS do cabeçalho

No CSS do cabeçalho (cabecalho.component.css, aplicaremos um estilo para a classe .banner, acessando a imagem do banner com img. Definiremos apenas uma largura (width) de 100%.

cabecalho.component.css:

.banner img {
  width: 100%;
}

Com isso feito, vamos retornar ao terminal e executar novamente a aplicação, pois interrompemos a execução para trabalhar na criação do componente:

ng serve

De volta à página http://localhost:4200/, ao recarregar, notamos que a mesma configuração de antes é exibida, ou seja, o cabeçalho ainda não apareceu.

Conclusão

No próximo vídeo, discutiremos sobre o que é necessário para que o componente criado seja exibido na tela da aplicação. Nos encontramos na sequência!

Sobre o curso Angular 19: estruture componentes com signals e controle de fluxo

O curso Angular 19: estruture componentes com signals e controle de fluxo possui 150 minutos de vídeos, em um total de 54 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:

• Conhecendo o Angular
• Entendendo o fluxo de dados
• Interfaces e inputSignal
• Entendendo o control flow
• Estilização condicional