Utilizando ngIf e ngIf else no Angular

Neste artigo você aprenderá utilizar as instruções ngIf e ngIf else no Angular, essenciais para qualquer projeto

Fala programador(a), beleza? Bora aprender mais sobre Angular!

O Angular, um dos frameworks JavaScript mais populares, oferece uma variedade de ferramentas e recursos para tornar o desenvolvimento de aplicações web uma experiência simplificada e otimizada.

Um desses recursos é a diretiva ngIf, que permite adicionar ou remover um elemento DOM com base em uma condição.

No entanto, há momentos em que precisamos lidar com cenários alternativos – e é aí que ngIf else entra em jogo. Neste artigo, vamos mergulhar profundamente no uso de ngIf e ngIf else no Angular.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Entendendo a diretiva ngIf

O básico

A diretiva ngIf é uma das diretivas embutidas mais utilizadas no Angular. Ela permite que você controle a renderização de um elemento condicionalmente.

// Se "condicao" for verdadeira, o elemento será renderizado
<div *ngIf="condicao">
  Conteúdo visível se a condição for verdadeira.
</div>

Incorporando else com ngIf

Por vezes, precisamos não só mostrar ou ocultar um elemento com base numa condição, mas também renderizar um elemento alternativo quando a condição não for satisfeita. É aqui que ngIf else se torna útil.

A sintaxe

Para usar ngIf else, você precisa de duas partes:

1. Uma referência local para o elemento alternativo.
2. A diretiva ngIf com uma condição, seguida pela palavra-chave else e a referência local.

<div *ngIf="condicao; else alternativa">
  Conteúdo visível se a condição for verdadeira.
</div>

<ng-template #alternativa>
  Conteúdo visível se a condição for falsa.
</ng-template>

Dicas para usar ngIf e ngIf else eficientemente

Evite lógica complexa no template

Embora seja tentador escrever lógica condicional diretamente em seu template, isso pode tornar seu código confuso e difícil de manter. Sempre que possível, mova a lógica condicional para o componente.

// No componente
get mostraConteudo() {
  return this.condicao === 'valorEsperado';
}

// No template
<div *ngIf="mostraConteudo; else alternativa">
  ...
</div>

Use ng-container para agrupar múltiplos elementos

Se você deseja mostrar ou ocultar vários elementos como uma única unidade, pode envolvê-los em um <ng-container>.

Isso é especialmente útil porque o ng-container não é renderizado no DOM final, evitando a adição de elementos desnecessários.

<ng-container *ngIf="condicao; else alternativa">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</ng-container>

<ng-template #alternativa>
  ...
</ng-template>

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre ngIf e ngIf else no Angular!

A capacidade de controlar condicionalmente a renderização de elementos é fundamental em qualquer aplicação web.

No Angular, as diretivas ngIf e ngIf else oferecem essa flexibilidade com uma sintaxe clara e direta.

Ao compreender bem essas diretivas e aplicá-las de forma eficiente, você pode criar interfaces de usuário mais dinâmicas e reativas, proporcionando uma experiência melhor para seus usuários.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.