El ng-for en Angular te permite iterar sobre elementos, pero en ocasiones es fundamental controlar la renderización de elementos según ciertas condiciones. Aquí es donde entra el ng-if como estructura de control. Descubre cómo utilizar esta poderosa herramienta para manipular de manera dinámica tus componentes en Angular.
¿Qué es ng-if y cómo funciona?
El ng-if es un condicional en Angular que decide si un elemento debe ser renderizado o no. A diferencia de simplemente ocultar un elemento, si la condición del ng-if no se cumple, el elemento no será generado en el DOM. Veamos cómo implementarlo con un ejemplo sencillo:
<div*ngIf="1 === 1"> Este contenido se muestra porque la condición se cumple.
</div>
Si la condición 1 === 1 es verdadera, el div se renderiza. Si cambiamos la condición a algo falso como 1 === 2, el div simplemente no aparecerá.
¿Cómo manejar condicionales más complejas?
Además de las condiciones simples, el ng-if permite usar expresiones complejas y anidaciones para crear lógica más rica. Supongamos que tienes una señal name y quieres renderizar contenido solo si el valor es "Nicolás":
Es crucial recordar que estas comparaciones son case sensitive, por lo que "nicolás" no se consideraría igual a "Nicolás".
¿Cómo trabajar con objetos y señales?
Supongamos que tienes un objeto person con atributos, y quieras que su renderización responda de forma reactiva a sus valores. Convertimos el objeto en una señal y lo utilizamos en una condición:
const personSignal =signal({ name:'Nicolás', age:20});<div *ngIf="personSignal().name === 'Nicolás' && personSignal().age > 18">SoyNicolás y soy mayor de 18</div>
Aquí, el contenido solo se renderizará si el nombre es "Nicolás" y la edad es mayor a 18.
¿Cómo implementar un else en ng-if?
Angular también permite manejar un else utilizando ng-template. Es decir, si la primera condición no se cumple, puedes definir qué contenido se mostrará:
<div*ngIf="condition; else elseBlock"> Esta es la condición verdadera.
</div><ng-template#elseBlock> Esta es la condición falsa.
</ng-template>
Puedes modificar el contenido del else cambiando el nombre del bloque como requieras, utilizando #nombreDelBloque.
¿Cómo hacer adaptativo el contenido de ng-if?
Para hacer el contenido dinámico y reactivo, podemos enlazarlo a un input. Adicionalmente, para manejar la pluralización basada en la cantidad de elementos en una lista:
<!-- Input para modificar la edad --><inputtype="number"(change)="changeAge($event)"><!-- Control de pluralización --><div*ngIf="items.length > 1"> {{ items.length }} items
</div><div*ngIf="items.length === 1"> 1 item
</div>
Implementar la lógica de pluralización correctamente es un reto común. Intenta resolverlo evaluando el número de elementos en tu array y ajustando el texto para que corresponda en singular o plural.
A medida que domines estas herramientas, podrás crear aplicaciones Angular más dinámicas y efectivas. ¡Sigue experimentando y aprendiendo con las múltiples posibilidades que Angular te ofrece!
esta es mi solución la hice lo más sencilla posible sin perder de vista el *ngIf
mi logica me dice que cuando sea 0 se pone el plural
Por si alguien le pasa que a la fecha estamos con la version de angular 19, no viene por default el funcionamiento de *ngIf solo funciona la version @if que la version actualizada, pero si quieren que funcione la version anterior *ngIf deberás colocar en tu component.ts la importación del commonModule. Te dejo como quedaría:
Yo tengo ese problema, a mi no me evalúa la condición y si le pongo la de 1 !== 2 me dice que no se puede hacer esa comparación, y lo tengo así como tú...
<span class="todo-count"><strong>{{tasks().length}}</strong> item<span *ngIf="tasks().length > 1">s</span></span>```Lo que hago es indicar a Angular que renderice la etiqueta span que contiene la letra "s" en caso de cumplirse la condición de que sea mayor a 1.
@if(condition){//bloque} @else{//bloque}
@if(1===1){<div>Mi contenido
</div>}
Para el reto hice lo siguiente:
Definí una propiedad en home.ts que define una propiedad computada llamada pendingTasksCount que calcula el número de tareas pendientes (no completadas) en función de la señal de tareas, utilizando el método filter para contar solo aquellas tareas cuyo estado de completado es falso
Implemente un simple if donde se muestra el número de tareas pendientes utilizando la función pendingTasksCount() y se ajusta el texto para mostrar "Tarea restante" en singular cuando hay una tarea pendiente, y "Tareas restantes" en plural cuando hay más de una tarea pendiente.
Me llevo que ngIf es muy útil para resolver casos comunes del frontend, como reaccionar a cambios en inputs o manejar correctamente la pluralización según la cantidad de elementos en una lista.
📍Manejo de condiciones alternativas con else
Me llevo que Angular permite definir un bloque alternativo (else) usando ng-template, lo que facilita manejar de forma clara qué se muestra cuando una condición no se cumple.
📍ngIf combinado con Signals y objetos
Me llevo que ngIf funciona perfectamente con Signals que contienen objetos, permitiendo renderizar contenido de forma reactiva según propiedades específicas como nombre, edad u otros atributos.
📍Uso de condiciones simples y complejas
Me llevo que ngIf permite usar expresiones simples y complejas, incluyendo comparaciones, operadores lógicos y condiciones basadas en Signals, siempre teniendo en cuenta que las comparaciones son case sensitive.
📍Qué hace realmente ngIf
Me llevo que ngIf no solo oculta elementos, sino que decide si un componente o elemento se renderiza o no en el DOM, lo que tiene impacto directo en el rendimiento y la lógica de la aplicación.
Yo lo hice de esta manera, pero me di cuenta investigando un poco mas de que no es eficiente llamar al metodo 2 veces y menos si este ejecuta mucho codigo o codigo complejo. por eso es mejor usar "async y pipes, para que se cargue una sola vez la lista y luego se use como usando una variable.
