🎯 Las validaciones ternarias en TypeScript (y también en HTML con Angular)

Hoy vamos a hablar de un tema que suena complicado pero es súper útil y elegante:

🧠 ¿Qué es una validación ternaria?

La validación ternaria (o operador ternario) es como un "if" en una sola línea.

📚 Su estructura es:

condición ? valorSiEsVerdadero : valorSiEsFalso;

Es como decir:

“Si esto es verdadero, haz esto; si no, haz lo otro” — ¡pero todo en una línea! 🎩

🧪 Ejemplo básico en TypeScript

const edad = 20;
const mensaje = edad >= 18 ? 'Eres mayor de edad 🧔' : 'Eres menor de edad 👶';
console.log(mensaje); // Eres mayor de edad 🧔

👉 Lo mismo con if sería:

let mensaje = '';
if (edad >= 18) {
  mensaje = 'Eres mayor de edad 🧔';
} else {
  mensaje = 'Eres menor de edad 👶';
}

🧼 ¿Ves la diferencia? El operador ternario es más limpio, directo y legible cuando son decisiones cortas.

🧩 ¿Y en Angular HTML con *ngIf o atributos?

También puedes usarlo directamente en la plantilla HTML, por ejemplo:

[style.color]="isError ? 'red' : 'green'">
  {{ isError ? '¡Ups, error!' : 'Todo bien 👍' }}

🧪 Otro ejemplo: mostrar íconos según estado

[icon]="isOnline ? 'wifi' : 'wifi-slash'">

Esto cambia el ícono dependiendo si isOnline es true o false.

⚠️ Cuándo NO usar ternarias

Evita ternarias cuando la lógica se complica mucho o hay varios niveles anidados 😵‍💫:

❌ Mal uso:

const mensaje = a > 10 
  ? b > 5 
    ? 'Alto y bien' 
    : 'Alto pero mal' 
  : 'Bajo';

En ese caso, es mejor usar if/else para mantenerlo claro.

✅ Cuándo SÍ usar ternarias

• Mostrar mensajes cortos en función de una condición
• Cambiar estilos dinámicos
• Elegir entre dos valores
• Dentro de interpolaciones en Angular

🧭 En resumen:

🚀 Ejercicio Rápido

¿Qué muestra este código?

const nivel = 7;
const resultado = nivel > 5 ? '✅ Aprobado' : '❌ Reprobado';
console.log(resultado);

🧠 Piensa unos segundos...

¡Correcto! Muestra: ✅ Aprobado