1 - Introdução 2 - Conceitos 3 - Criando e executar projetos 4 - Componente 5 - Interpolação de texto 6 - Event binding 7 - Property binding 8 - Diretiva ngIf 9 - Diretiva ngFor 10 - Diretiva ngSwitch 11 - Diretiva ngStyle 12 - Diretiva ngClass 13 - Control Flow 14 - Control Flow condicional 15 - Control Flow laço de repetição 16 - Control Flow estrutura de escolha 17 - Bootstrap 18 - FormsModule (parte 1) 19 - FormsModule (parte 2) 20 - Reactive Forms 21 - Apresentação do projeto 22 - Criar componente do projeto 23 - Strictnullchecks 24 - Criar formulário 25 - Criar tabela 26 - Implementar formulário reativo 27 - Validators 28 - Criar modelo de pessoa 29 - Mensagens de validação 30 - Propriedade disabled 31 - Visilidade de botões 32 - Criar vetor 33 - Função de cadastro 34 - Função de listagem 35 - Função de seleção 36 - Função de alteração 37 - Função de remoção 38 - Função para cancelar 39 - Considerações

4 - Criando componente

Olá pessoal, na quarta aula do treinamento de Angular 17, iremos criar nosso primeiro componente.

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:[].

Fazendo isso, você conseguirá exibir a estrutura do seu componente, na aula abaixo ensino cada etapa deste tutorial: