Uso de ngIf y ngFor para control de flujos en Angular

Clase 14 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Cómo utilizar ng-if en Angular?

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":

<div *ngIf="name() === 'Nicolás'">
  Soy Nicolás
</div>

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">
  Soy Nicolá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 -->
<input type="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!

Brandon Lee Aguero Fernandez

student•

Esta sería mi forma de solucionar la misión de la clase 🫡.

<span class="todo-count"
  ><strong>{{ tasks().length }}</strong>
  {{ tasks().length <= 1 ? "item" : "items" }} left</span
>

Para convertir un string a number yo generalmente hago lo siguiente, antepongo el signo mas y listo, como podrás ver a continuación:

this.inputTask = +this.inputTask

Leiber Bertel

student•

Hola, te sugiero usar la función Number, de está es más claro lo que tratas de hacer:

Number(newValue)

Gustavo Pino

student•

Asi fue como lo solucione

<span class="todo-count">
        <strong>{{ tasks().length }}</strong>
        {{ tasks().length === 1 ? 'item' : 'items' }}
      </span>

Claudia Canto Flores

student•

amor eterno al operador ternario

Jesús Sánchez González

student•

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

Henry Alcaraz

student•

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:

Dario Galvez de los Santos

student•

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ú...

Dave Juanes

student•


\<span class="todo-count">\<strong>{{ tasks().length }}\</strong> item{{ tasks().length > 1 ? 's' : '' }} left\</span>

Omar Stiven Rivera Rocha

student•

Esta es mi solución

<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.

Heydi García Sánchez

student•

<span class="todo-count"><strong>{{ this.tasks().length }}</strong> item{{ this.tasks().length === 1 ? '' : 's' }} left</span>

Pablo Guallichico

student•

Les comparto mi solución, le agregue el condicional que si no existen tareas no se renderize el conteo de tareas.

<span class="todo-count" *ngIf="tasks().length > 0"><strong>{{ tasks().length }}</strong> {{ tasks().length > 1 ? 'items' : 'item' }} left</span>

Vee Pabuence Vargas

student•

Esta fue mi forma de solucionar la misión jeje

home.html

<span class="todo-count"><strong>{{getTodoChecks()}}</strong> item{{getTodoChecks()>1 || getTodoChecks()==0 ? "s" : ''}} left</span>

home.ts

public getTodoChecks = computed(()=>      ``this``.tasks().filter(todo => !todo.completed).length    );
```public getTodoChecks = computed(()=>      ``this``.tasks().filter(todo => !todo.completed).length    );

Saskia Milagros Cornejo Flores

student•

Mi solución a la misión de la clase sería:

{{tasks().length}} 1; else elseItem"> items <ng-template #elseItem> item</ng-template>

Luis Sebastian Conde Toro

student•

Mi solución fue esta sin perder de vista el ngIf y el ng-template:

{{ tasks().length }} <ng-container *ngIf="tasks().length === 1; else elseBlock"> item</ng-container> <ng-template #elseBlock> items</ng-template>

Raúl Adolfo Sánchez Rodríguez

student•

ng-template

Gustavo Fernández

student•

Esta es mi solución:

<span class="todo-count">
        <strong>{{tasks().length}}</strong>
        <span *ngIf="tasks().length === 1; else masItem"> item</span>
        <ng-template #masItem>
          <span> items</span>
        </ng-template>
      </span>

Gustavo Fernández

student•

<span class="todo-count">
        <strong>{{tasks().length}}</strong>
        <span *ngIf="tasks().length === 1; else masItem"> item</span>
        <ng-template #masItem>
          <span> items</span>
        </ng-template>
      </span>
```\<span class="todo-count">        \<strong>{{tasks().length}}\</strong>        \<span \*ngIf="tasks().length === 1; else masItem"> item\</span>        \<ng-template #masItem>          \<span> items\</span>        \</ng-template>      \</span>

Gustavo Fernández

student•

Esta es mi solución: {{tasks().length}} item <ng-template #masItem> items </ng-template>

<span class="todo-count">
  <strong>{{tasks().length}}</strong>
  <span *ngIf="tasks().length === 1; else masItem"> item</span>
  <ng-template #masItem>
    <span> items</span>
  </ng-template>
</span>

Rubén Marinez Flores

student•

Mi ejercicio quedo asi:

{{ tasks().length }} item 1 ">s

Cesar Augusto Avendaño Gamboa

student•

Comparto mi aporte

{{ tasks().length }} @if (tasks().length > 0 && tasks().length === 1) { item }@else { items }

Josue David Cardenas Avila

student•

Así solucioné el reto: 1; else elseBlock">{{ tasks().length }} items <ng-template #elseBlock>{{ tasks().length }} item</ng-template >

Anderson Duarte Santos

student•

Como es solo una palabra utilice el método de condicional ternaria de la siguiente forma:

<span class="todo-count">
  <strong>{{tasks().length}}</strong>
  {{tasks().length <= 1 ?'item': 'items'}}
</span>

Emilio Nicolás Mendoza Patti

student•

Esta seria la forma usando *ngIf en lo particular se entiende facil pero se me parece muy verboso

<div *ngIf="tasks().length > 1; else elseBlock">
    <span class="todo-count">
        <strong>{{tasks().length}}</strong> items
    </span>
</div>
<ng-template #elseBlock>
    <span class="todo-count">
        <strong>{{tasks().length}}</strong> item
    </span>
</ng-template>

Yo prefiero mas esta forma:

<div *ngIf="tasks().length > 1; else elseBlock">
<span class="todo-count">
    <strong>{{tasks().length}}</strong> item{{tasks().length > 1 ? 's': ''}}
</span>