Como usar if ternário no Angular?

Aprenda a simplificar suas condições no Angular com o if ternário.

O que é o if ternário no Angular?

No Angular, desde a versão 1.1.5, é possível usar o operador ternário, assim como em outras linguagens de programação.

Sintaxe do if ternário

condicao ? "resultado caso verdadeiro" : "resultado caso falso"

Exemplo: variavel === "valor verdadeiro" ? "Verdadeiro" : "Falso"

Como funciona o if ternário no Angular?

Se a condição for verdadeira, o resultado será o valor após o "?" . Caso contrário, será o valor após o ":".

Exemplo de uso no HTML

{{variavel === 'valor verdadeiro' ? 'conteúdo caso verdadeiro' : 'conteúdo caso falso'}}

HTML exemplo: {{variavel === 'valor verdadeiro' ? 'conteúdo caso verdadeiro' : 'conteúdo caso falso'}}

Histórico do if ternário no Angular

Desde o AngularJS, o uso de operadores ternários evoluiu, permitindo soluções mais diretas e elegantes.

Como era antes do Angular 1.1.5?

{true: 'result_if_true', false: 'result_if_false'}[condição]

Quando usar o if ternário?

Use-o como alternativa ao else no ngIf para simplificar o código.

Exemplo em TypeScript

let resultado = condicao ? "valor verdadeiro" : "valor falso";

TypeScript exemplo: let resultado = condicao ? "valor verdadeiro" : "valor falso";

O que é um condicional?

Condicionais como if, else e o operador ternário permitem manipular decisões em seu código.