Ao construir interfaces de usuário para aplicações web, frequentemente nos deparamos com cenários como "Exibir uma lista de itens se ela estiver disponível, ou mostrar um placeholder se estiver vazia." No Angular, esse tipo de tarefa é realizado utilizando diretivas estruturais — ferramentas poderosas que controlam o que é renderizado no template e quando.

Diferente dos atributos HTML comuns, as diretivas estruturais não apenas ajustam o comportamento de um elemento — elas realmente alteram a estrutura do DOM ao adicionar ou remover elementos inteiros.

Diretiva Estrutural NgFor

Suponha que você tenha uma lista de tarefas em seu TaskListComponent. Cada tarefa deve ser exibida com seus próprios elementos de interface: um botão de exclusão, um alternador de status, etc. Escrever cada tarefa manualmente no HTML seria ineficiente e difícil de manter à medida que os dados mudam.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

O Angular fornece a diretiva *ngFor, que permite percorrer um array e gerar automaticamente um elemento HTML para cada item.

<task-component *ngFor="let task of tasks"></task-component>

Aqui, *ngFor="let task of tasks" informa ao Angular: "Para cada task no array tasks, crie um <task-component>". Se o array contiver 3 tasks, o Angular renderizará 3 instâncias separadas de task-component, cada uma com seus próprios dados. Isso torna a interface mais escalável e elimina código repetitivo.

Recursos Extras do ngFor

Além da iteração básica, o *ngFor oferece várias variáveis de contexto úteis que podem ser acessadas diretamente na diretiva usando let.

Veja uma referência rápida:

Veja um exemplo utilizando algumas delas:

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

Neste exemplo, a variável odd é utilizada para aplicar uma classe CSS a cada linha alternada, facilitando a visualização da lista.

Diretiva Estrutural NgIf

Vamos analisar como o renderização condicional funciona utilizando um exemplo simples de lista de tarefas. O objetivo é exibir a lista se ela contiver tarefas e, caso esteja vazia, mostrar uma mensagem como "Nenhuma tarefa ainda".

No Angular, utiliza-se a diretiva *ngIf para exibir ou ocultar elementos condicionalmente. Embora pareça um atributo HTML comum, ela realiza muito mais operações nos bastidores.

<div *ngIf="tasks.length > 0">Task List</div>

Quando o Angular processa o *ngIf, ele reescreve o template nos bastidores. Em vez de renderizar o elemento diretamente, ele o envolve dentro de um <ng-template>, e só o adiciona ao DOM se a condição for true.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Se a condição for avaliada como false (ou seja, tasks.length === 0), o Angular não renderiza o elemento — ele fica completamente ausente do DOM.

Mas e se você quiser exibir uma mensagem alternativa em vez de simplesmente ocultar o conteúdo? É aí que a cláusula else do *ngIf é útil. Ela permite referenciar um template alternativo usando um <ng-template> com um rótulo personalizado.

Veja o que acontece:

• O Angular primeiro verifica se o array tasks possui itens;

• Se possuir, renderiza o <div> com os componentes de tarefa;

• Se o array estiver vazio, utiliza o template #noTasks e exibe a mensagem: "No tasks yet 😊".

Isso torna seus templates muito mais limpos e ajuda a gerenciar estados vazios de forma amigável para o usuário.