Renderização condicional com @if
Mostre conteúdo condicionalmente com @if e @else.
Renderização condicional com @if é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Fluxo de controle integrado
Os modelos modernos do Angular incluem blocos de fluxo de controle integrado escritos com o símbolo de arroba. Eles substituem as diretivas estruturais antigas e não precisam de nenhuma importação.
O bloco if
O bloco at-if renderiza conteúdo condicionalmente. Você escreve o símbolo de arroba seguido da palavra if, a condição entre parênteses e o conteúdo entre chaves.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Substituindo ngIf
Isso substitui a antiga diretiva estrutural *ngIf. A nova sintaxe faz parte da linguagem de modelos, portanto não é necessário importar nada.
Lendo um sinal na condição
A condição pode ser qualquer expressão, incluindo uma chamada de sinal.
// @if (count() > 0) {
// <p>You have items</p>
// }O bloco else
Um bloco at-else fornece conteúdo alternativo quando a condição é falsa. Ele vem imediatamente depois da chave de fechamento do bloco if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }Cadeias else if
Você pode encadear condições usando at-else if e, depois, um at-else final.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Armazenando o resultado da condição
O bloco at-if pode vincular o resultado da condição a uma variável local com a palavra-chave as, o que é útil para restringir valores nulos.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Por que usar a nova sintaxe
O fluxo de controle integrado é mais legível, tem verificação de tipos e é mais eficiente que as diretivas estruturais. Ele evita a microssintaxe e o asterisco das diretivas antigas.
Nenhum elemento contêiner é necessário
Ao contrário dos padrões antigos, o bloco at-if não exige um elemento contêiner nem ng-template. As próprias chaves delimitam o conteúdo condicional.
Aninhando blocos
Os blocos de fluxo de controle podem ser aninhados livremente. Um at-if pode conter outro at-if, um at-for e assim por diante.
Combinando com vinculações
Dentro de um bloco at-if, você usa a linguagem completa de modelos: interpolação, vinculações de propriedades e vinculações de eventos funcionam normalmente.
Verificação rápida: condicionais
A nova sintaxe condicional.
Recapitulação: condicionais
Você aprendeu o bloco at-if para renderização condicional, com at-else e at-else if para alternativas, e a palavra-chave as para capturar o resultado. Ele substitui star-ngIf e não precisa de importação. A seguir: repetição com at-for.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Renderização condicional com @if” é grátis?
Sim — o texto completo de “Renderização condicional com @if” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Renderização condicional com @if”?
Mostre conteúdo condicionalmente com @if e @else. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Renderização condicional com @if”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Renderização condicional com @if
- Repetição com @for
- Alternância com @switch
- Carregamento adiado com @defer