Recuerdo la primera vez que me enfrenté a la directiva *ngIf en Angular. Estaba trabajando en una aplicación que necesitaba mostrar un mensaje de bienvenida solo a usuarios autenticados, y me frustraba lo complicado que parecía hacerlo sin llenar el código de condicionales interminables. Entonces, alguien en el equipo me sugirió usar *ngIf, y fue como si todo cobrara sentido. ¡Qué alivio fue descubrir lo sencillo y potente que podía ser!
¿Qué es *ngIf?
La directiva *ngIf es una herramienta fundamental en Angular que nos permite mostrar u ocultar elementos del DOM en función de una condición. Si la expresión que le damos resulta ser true, el elemento se renderiza; si es false, desaparece del DOM por completo. A diferencia de simplemente usar CSS para ocultar elementos, con *ngIf el elemento deja de existir en la página, lo que mejora notablemente el rendimiento.
Mi experiencia con *ngIf
En uno de mis primeros proyectos con Angular, necesitaba mostrar una lista de productos solo si el usuario estaba autenticado. Intenté hacerlo con condicionales en el componente, pero el código se volvía caótico. Entonces encontré *ngIf y fue como si hubiera descubierto el santo grial de las directivas. El código se simplificó tanto que sentí un alivio inmediato al ver cómo la interfaz respondía de manera precisa.
Sintaxis básica de *ngIf
La sintaxis de *ngIf es tan clara que, una vez que la comprendes, no hay vuelta atrás:
<div *ngIf="isLoggedIn">
¡Bienvenido de nuevo!
</div>Este sencillo fragmento hizo que el componente se viera limpio y fácil de entender. Además, al eliminar el elemento cuando el usuario no está autenticado, también optimicé el rendimiento, ya que Angular no necesita gestionar componentes innecesarios.
Uso de *ngIf con else
Un día me encontré con la necesidad de mostrar un mensaje de carga mientras llegaban los datos de la API. Al principio pensé en usar varios *ngIf, pero luego me di cuenta de que podía hacerlo mucho más elegante con else.
<div *ngIf="cargando; else mostrarContenido">
Cargando datos...
</div>
<ng-template #mostrarContenido>
<p>Datos cargados exitosamente.</p>
</ng-template>Este enfoque no solo era más claro, sino que evitaba la redundancia de código. Me sentí mucho más seguro al ver cómo el flujo visual se manejaba de manera natural.
*ngIf con then y else
Más adelante, en otro proyecto, descubrí que podía usar then y else para manejar diferentes estados en una sola línea. Fue un cambio de mentalidad que realmente optimizó mi manera de estructurar componentes:
<ng-container *ngIf="cargando; then plantillaCargando; else plantillaContenido"></ng-container>
<ng-template #plantillaCargando>
<p>Por favor, espera...</p>
</ng-template>
<ng-template #plantillaContenido>
<p>Contenido cargado con éxito.</p>
</ng-template>Gracias a este enfoque, el código se volvió mucho más mantenible y claro. No podía creer que hubiera pasado tanto tiempo usando métodos más complicados cuando esta solución era tan sencilla.
Lecciones aprendidas
Algo que aprendí trabajando con *ngIf es que menos es más. A veces, tratar de resolver problemas con soluciones complejas solo hace que el código sea más difícil de entender y mantener. Adoptar prácticas simples como usar *ngIf me permitió concentrarme en la lógica central sin perderme en detalles innecesarios.
Conclusiones sobre *ngIf en Angular
La directiva *ngIf en Angular es una de esas pequeñas joyas que facilitan enormemente la vida del desarrollador. Una vez que entiendes cómo funciona, es imposible volver atrás. Si estás trabajando en una aplicación con Angular y aún no la has usado, te recomiendo que lo intentes. Verás cómo tu código se vuelve más claro, eficiente y mantenible.
Para profundizar en cómo sacarle el máximo provecho a esta directiva, te recomiendo echarle un vistazo a la documentación oficial de Angular NgIf.
Por último, si quieres profundizar en Angular y aprender más técnicas como esta, ¡no dudes en unirte a nuestro Bootcamp de Desarrollo Web en KeepCoding!.
