ngIf vs ngSwitch en Angular

Curso de Angular: Creación de Aplicaciones Web

Contenido del curso

Introducción a Angular y Fundamentos

Estructuras de control en Angular

Alistando tu aplicación para producción

Componentes Reutilizables y Comunicación

Ciclo de vida de los componentes

Mejorando la interfaz del producto

Integración y Datos

Enrutamiento y Navegación

Perfeccionando tu e-commerce

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:38

ngIf vs ngSwitch en Angular

Curso de Angular: Creación de Aplicaciones Web

Clase 15 de 71

Clase 15 / 71

Recursos

Trabajar con condicionales en Angular se vuelve mucho más limpio cuando entiendes cuándo usar ngIf y cuándo dar el salto a ngSwitch. Aquí resolvemos el reto de pluralización de un contador de tareas y aprendes a manejar múltiples condiciones sobre un mismo atributo sin llenar tu plantilla de if repetidos.

Cómo resolver la pluralización con ngIf en Angular

El reto consistía en mostrar la palabra item en singular cuando hay una sola tarea y items en plural cuando hay más. La clave está en aislar la palabra dentro de un span y aplicar la directiva estructural ngIf con su bloque else.

La lógica es directa: si el length del arreglo de tareas es igual a 1, muestras item. Si no, Angular renderiza el contenido del ng-template que definiste como elseBlock.

html item <ng-template #elseBlock>items</ng-template>

Al probarlo en el navegador con dos tareas verás items, y al eliminar una el texto cambia automáticamente a item. Reactividad pura sin lógica adicional en el componente.

¿Qué hace ngIf en Angular? Es una directiva estructural que añade o elimina un elemento del DOM según una condición booleana. Con else puedes apuntar a un ng-template alternativo cuando la condición no se cumple.

Cuándo conviene usar ngSwitch en lugar de ngIf

ngIf funciona perfecto para una o dos condiciones, pero cuando empiezas a evaluar el mismo atributo contra varios valores posibles, encadenar ngIf se vuelve ruidoso y difícil de leer. Ahí entra ngSwitch, una directiva pensada para centralizar múltiples casos sobre una sola variable.

La estructura tiene tres piezas: un contenedor con [ngSwitch] que vigila el atributo, varios *ngSwitchCase con los valores específicos, y un *ngSwitchDefault que actúa como fallback cuando ningún caso coincide.

html

<div [ngSwitch]="person.name"> Yo soy Nicolás Yo soy Julián Yo soy Ana Yo no soy nadie </div>

Si tuvieras que escribir esto con ngIf, terminarías con cuatro o cinco condicionales repitiendo la misma comparación. Con ngSwitch declaras una sola vez el atributo a evaluar y todo lo demás son ramas limpias.

¿Cuál es la diferencia entre ngIf y ngSwitch? ngIf evalúa una condición booleana independiente. ngSwitch compara un mismo valor contra múltiples casos posibles, ideal cuando tienes tres o más ramas sobre el mismo atributo.

Cómo conectar ngSwitch con un input reactivo

Para ver ngSwitch reaccionar en tiempo real, conectas un input que actualice el atributo name de la señal person. Como name es un string, no necesitas conversiones numéricas: solo defines un método changeName que reciba el nuevo valor y actualice la propiedad dentro de la señal.

typescript changeName(event: Event) { const newName = (event.target as HTMLInputElement).value; this.person.update(prev => ({ ...prev, name: newName })); }

Al escribir Nicolás, Julián o Ana en el input verás el mensaje correspondiente. Si escribes Valentina o cualquier otro nombre que no esté contemplado, Angular cae al ngSwitchDefault y muestra Yo no soy nadie.

Qué patrones aprendiste con ngIf, ngSwitch y signals

El ejemplo cubre varios conceptos prácticos que se conectan entre sí. Vale la pena nombrarlos para que los reconozcas en otros contextos.

Directivas estructurales: ngIf, ngSwitch, ngSwitchCase y ngSwitchDefault modifican la estructura del DOM según condiciones del componente.
ng-template con else: te permite definir bloques alternativos sin duplicar markup ni anidar condicionales.
Property binding con corchetes: la sintaxis [ngSwitch]="valor" enlaza el atributo del DOM con una expresión del componente.
Signals y método update: actualizar propiedades dentro de una señal de objeto requiere update con el spread del estado previo para mantener inmutabilidad.
Pluralización condicional: un patrón frecuente en interfaces que muestran contadores, listas o resultados de búsqueda.

La regla práctica es simple: si tu condición es binaria, quédate con ngIf. Si estás comparando un mismo valor contra tres o más opciones, cambia a ngSwitch y tu plantilla se lo agradecerá.

¿En qué parte de tu app actual cambiarías un bloque de ngIf encadenados por un ngSwitch? Cuéntame tu caso en los comentarios.