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

15 - Control Flow - Laço de repetição

Olá pessoal, na décima quinta aula do treinamento de Angular 17, iremos implementar uso do controle de fluxo @for.

Vamos utilizar a estrutura do componente criado na última aula, juntamente com o controle de fluxo de condicional, nosso arquivo TypeScripte terá a seguinte estrutura:

Em seguida, no arquivo HTML:

A controle de fluxo @for dispõe de outras funcionalidades, exemplo:

Função	O que faz
$count	Retorna a quantidade de vezes que um loop foi realizado
$index	Índice do laço de repetição que está sendo executado
$first	Retorna se determinada posição é a primeira linha que está sendo executada
$last	Retorna se determinada posição é a última linha que está sendo executada
$even	Retorna verdadeiro, caso a linha seja par
$odd	Retorna verdadeiro, caso a linha seja ímpar

Dica: Você pode implementar o uso do comando @empty. Caso a estrutura de repetição não seja realizada, podemos retornar uma mensagem, estrutura bem interessante, caso o vetor não contenha registros:

Abaixo deixo um vídeo mostrando cada etapa desta aula: