🚀 Diferencias entre *ngIf y ngSwitch en Angular

Cuando trabajamos con Angular en la capa de presentación (HTML), es común necesitar mostrar u ocultar elementos dinámicamente según una condición. Para esto, Angular nos proporciona dos estructuras de control poderosas: *ngIf y ngSwitch. Aunque ambas sirven para manejar la visualización condicional, tienen diferencias clave en su funcionamiento y en los escenarios donde se recomienda usar cada una.

🔍 1. ¿Qué es *ngIf y cómo funciona?

*ngIf es una directiva estructural que permite renderizar o eliminar elementos del DOM según una condición booleana. Si la condición es true, el elemento se muestra; si es false, el elemento se elimina completamente del DOM.

✅ Ejemplo de uso:

*ngIf="mostrarMensaje">
  📢 Este mensaje se muestra si `mostrarMensaje` es verdadero.

En este caso, si mostrarMensaje es true, el párrafo se mostrará; si es false, el elemento ni siquiera existirá en el DOM.

🎯 Ventajas de *ngIf:

• 🔹 Remueve completamente el elemento del DOM cuando la condición es false.
• 🔹 Ideal para elementos que solo se necesitan en ciertas condiciones.
• 🔹 Mejora el rendimiento si el contenido es pesado, ya que no se renderiza innecesariamente.

⚠️ Desventajas de *ngIf:

• 🔸 Si se usa con contenido pesado, al cambiar la condición a true puede haber un pequeño retraso en la re-renderización.
• 🔸 No es eficiente si se usa para cambiar entre múltiples opciones, ya que requiere múltiples verificaciones.

🔍 2. ¿Qué es ngSwitch y cómo funciona?

ngSwitch es otra directiva estructural que permite alternar entre múltiples opciones. Es similar a switch en TypeScript, donde un valor determina cuál de varias opciones se renderiza.

✅ Ejemplo de uso:

[ngSwitch]="estado">
   *ngSwitchCase="'iniciado'">🚀 El proceso ha iniciado.
   *ngSwitchCase="'en_progreso'">⏳ El proceso está en progreso.
   *ngSwitchCase="'completado'">✅ El proceso se ha completado.
   *ngSwitchDefault>⚠️ Estado desconocido.

🎯 Ventajas de ngSwitch:

• 🔹 Más organizado cuando hay múltiples condiciones.
• 🔹 Evita el anidamiento excesivo de *ngIf, haciendo el código más limpio.
• 🔹 Mejora la legibilidad cuando hay más de dos condiciones posibles.

⚠️ Desventajas de ngSwitch:

• 🔸 Todos los casos se evalúan, aunque solo uno se muestre.
• 🔸 No es ideal si solo hay dos condiciones (para esto es mejor *ngIf).

⚖️ 3. Comparación entre *ngIf y ngSwitch

🛠️ 4. Uso en TypeScript

En Angular, tanto *ngIf como ngSwitch dependen de variables de TypeScript para evaluar sus condiciones. Por ejemplo, en el componente:

export class AppComponent {
  mostrarMensaje: boolean = true;
  estado: string = 'en_progreso';
}

• 🔹 mostrarMensaje controla la visibilidad del elemento con *ngIf.
• 🔹 estado define qué opción se muestra en ngSwitch.

🤔 5. ¿Cuándo usar cada uno?

✅ Usa *ngIf cuando solo hay dos opciones (mostrar u ocultar un elemento).

✅ Usa ngSwitch cuando hay múltiples opciones posibles y solo una debe mostrarse.

📝 Ejemplo práctico:

Supongamos que queremos mostrar un mensaje de estado de una tarea:

🔹 Con *ngIf:

*ngIf="estado === 'completado'">✔️ Tarea completada
 *ngIf="estado === 'pendiente'">⌛ Tarea pendiente

🔹 Con ngSwitch:

[ngSwitch]="estado">
   *ngSwitchCase="'completado'">✔️ Tarea completada
   *ngSwitchCase="'pendiente'">⌛ Tarea pendiente
   *ngSwitchDefault>⚠️ Estado desconocido

📌 Si solo hay dos opciones, *ngIf es más eficiente.

📌 Si hay más de dos opciones, ngSwitch es más legible.

🎯 Conclusión

Tanto *ngIf como ngSwitch son herramientas poderosas en Angular, pero deben usarse según el escenario adecuado.

✅ *ngIf es ideal para condiciones simples donde un elemento debe mostrarse o desaparecer completamente del DOM.

✅ ngSwitch es mejor cuando hay múltiples opciones y solo una debe mostrarse.

⚡ Usar la opción correcta puede hacer que tu código sea más eficiente, limpio y mantenible. 🚀