Angular 20

1 - Introdução 2 - Conceitos 3 - Configurar ambiente 4 - Criar e executar projeto 5 - Componente 6 - Interpolação de texto 7 - Data bindings 8 - FormsModule 9 - Controle de fluxo 10 - Diretivas 11 - Diretiva ngStyle 12 - Diretiva ngClass 13 - Diretivas customizadas 14 - Formulário reativo 15 - Validar formulário reativo 16 - Bootstrap 17 - Projeto 18 - Estruturar formulário 19 - Estruturar tabela 20 - Visibilidade dos botões 21 - Formulário Reativo 22 - Validar formulário 23 - Modelo 24 - Vetor 25 - Cadastro e listagem 26 - Seleção 27 - Cancelar 28 - Alteração 29 - Remoção 30 - Considerações

5 - Componente

Olá pessoal, na quinta aula do treinamento de Angular 20, iremos trabalhar com componentes.

Componentes são partes de um site/sistema. A grande vantagem de adotarmos o uso de componentes, é a reutilização e estrutura mais simplificada.

Para criarmos um componente, é necessário que nosso projeto não esteja sendo executado. Procure o terminal do VSCode, caso esteja em execução utilize o atalho CTRL + C para finalizar.

Agora podemos criar um componente, existem duas opções:

  • ng generate component meu-componente
  • ng g c meu-componente

Fique à vontade para escolher o comando para gerar seus componentes. Agora vamos compreender a estrutura de um componente:

  • HTML: Arquivo de estrutura HTML
  • CSS: Arquivo para estilização da página
  • TS: Arquivo para implementar a regra de negócios
  • SPEC.TS: Arquivo responsável pelos testes unitários

Para exibirmos um componente é bem simples, primeiro abra o arquivo app.component.html e chame seu componente, exemplo: < app-meu-componente>

Para finalizarmos, importe este componente. O Angular precisa saber que você está utilizando determinado componente, abra o arquivo app.component.ts, importe na parte superior e faça referência no vetor imports:[].

Acompanhe nossa aula no YouTube: