Angular cambió la forma de escribir condicionales en el HTML y adoptó una sintaxis declarativa inspirada en Svelte. Si vienes de usar ngIf y ngFor atados a elementos, vas a notar que la nueva propuesta usa bloques con @if, @else y vive desacoplada del HTML, lo que hace tu código más limpio y fácil de leer.
¿Qué cambia con la nueva sintaxis declarativa de Angular?
La diferencia clave es que las estructuras de control dejan de estar pegadas a un elemento del DOM. Antes, un ngIf se escribía como atributo dentro de un <div> o cualquier etiqueta. Ahora, escribes el bloque con una arroba @, defines la condición y dentro colocas el elemento que quieres renderizar.
Esto se parece mucho a cómo escribirías un if en JavaScript, lo que reduce la curva mental cuando saltas entre el template y la lógica.
¿Qué es la nueva sintaxis de control de flujo en Angular? Es una forma declarativa de escribir condicionales y bucles usando @if, @else y @for directamente en el template, sin atarlos a un elemento HTML como hacía ngIf.
¿Cómo se escribe un @if en lugar de ngIf?
La estructura es directa. Pones @if seguido de la condición entre paréntesis y abres llaves para el bloque que quieres mostrar. Por ejemplo, si te suscribes al valor de una signal y preguntas si es igual a Nicolás, el bloque imprime el elemento solo cuando la condición se cumple.
La retrocompatibilidad permite que convivan ambas sintaxis en el mismo proyecto. Puedes migrar de forma incremental sin romper nada.
¿Cómo manejar @if con @else en Angular sin ngTemplate?
Aquí es donde más se nota la mejora. Con la sintaxis antigua, un else requería declarar un ngTemplate con una referencia y enlazarla al ngIf. Era explícito, pero verboso y poco intuitivo para quien recién llega.
Con la nueva sintaxis basta con encadenar @else después del bloque @if. Dentro pones el elemento alternativo y listo. No necesitas referencias ni templates auxiliares.
Un ejemplo del flujo: si el nombre es Nicolás y la edad es mayor a 18, renderizas un <strong> que dice "Soy Nicolás y soy mayor de 18". Si no se cumple, el @else muestra un bloque en italic con "Soy Nicolás y soy menor de 18".
¿Necesito ngTemplate con la nueva sintaxis? No. El bloque @else reemplaza por completo al patrón de ngTemplate con referencias, así que tu template queda más corto y legible.
¿Por qué Angular adoptó esta sintaxis tipo Svelte?
Frameworks como Svelte popularizaron las estructuras declarativas dentro del HTML. Angular tomó esa idea para que el control de flujo fuera más natural y se pareciera al JavaScript que ya escribes todos los días. El resultado: menos fricción cognitiva al pasar del .ts al template.
¿Puedo mezclar ngIf y @if en el mismo proyecto?
Sí, y este punto es importante si trabajas con código legacy. Angular conserva la retrocompatibilidad, así que puedes tener componentes con ngIf tradicional al lado de componentes con @if. Vas migrando a tu ritmo.
Esto te prepara para dos escenarios reales:
- Proyectos antiguos que mantienen la sintaxis con ngIf y ngFor.
- Proyectos nuevos o en migración que ya usan
@if, @else y @for.
Un detalle práctico que vale la pena recordar: cada estructura de control debe iniciar con @. Si se te olvida la arroba antes del else, el compilador lanza un error. Lo mismo con el cierre correcto de etiquetas; si abres un <strong> y lo cierras como </div>, Angular te lo señala directo en la consola.
Conceptos clave de la clase
- Sintaxis declarativa con @ [0:05]: bloques como
@if y @else que viven en el template sin atarse a un elemento HTML, inspirados en Svelte.
- Retrocompatibilidad de Angular [0:48]: capacidad de usar la sintaxis antigua y la nueva en el mismo proyecto, permitiendo migración incremental.
- ngIf tradicional [1:10]: directiva estructural enlazada a un elemento HTML, común en proyectos legacy.
- Bloque @if con signals [1:55]: integración natural entre la nueva sintaxis y las signals de Angular para reactividad.
- @else sin ngTemplate [3:20]: reemplazo directo del patrón con
ngTemplate y referencias, más corto y explícito.
- Errores comunes [5:30]: olvidar la
@ antes de else o cerrar mal las etiquetas HTML, ambos detectados por el compilador.
¿Ya migraste algún proyecto a la nueva sintaxis? Cuéntame en los comentarios qué bloque te resultó más útil o dónde encontraste fricción al cambiar de ngIf a @if.
