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

8 - Diretiva *ngIf

Olá pessoal, na oitava aula do treinamento de Angular 17, iremos aprender a trabalhar com diretivas.

Diretivas são funcionalidades para implementarmos em nossos arquivos HTML, há diversas diretivas, algumas delas:

Diretiva	Funcionalidade
*ngIf	Estrutura de condicional, utiliza o padrão de um operador ternário.
*ngFor	Estrutura de repetição, ideal para trabalharmos com estruturas de listas e tabelas.
[ngSwitch]	Estrutura de escolha, ideal quando há diversas opções de retornos, dependendo do valor de uma variável.
[ngClass]	Estrutura para adicionar dinamicamente uma classe CSS.

Vamos fazer um pequeno exemplo utilizando a diretiva *ngIf, veja abaixo como fica a estrutura TypeScript do nosso projeto:

No arquivo CSS, podemos criar uma classe chamada quadrado:

Pra finalizar, no arquivo HTML teremos a seguinte estrutura:

IMPORTANTE! No arquivo TypeScript, quando você for utilizar alguma diretiva, precisa importar o commonModule, exemplo: imports: [CommonModule]

Acompanhe a implementação desse exemplo na aula abaixo: