Estructuras de Control y Renderizado Dinámico en Angular

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

Resumen

¿Qué son las estructuras de control?

Las estructuras de control son herramientas esenciales en la programación que nos permiten manejar el flujo de ejecución de un programa. En Angular, estas estructuras son cruciales para mostrar elementos de forma dinámica, incluyendo, por ejemplo, la renderización de listas basadas en condiciones específicas. Utilizar estas estructuras permite que nuestras aplicaciones se adapten y respondan mejor al estado actual de los datos.

¿Cómo podemos trabajar con signals en Angular?

El concepto de signals en Angular es fundamental cuando se trata de obtener y manejar valores dinámicos. Un signal o señal es una referencia dinámica a un valor que puede ser un string u otro tipo de datos como un array. El uso de signals permite a los desarrolladores suscribirse a estos valores y obtener actualizaciones cada vez que el valor cambia. Así, podemos crear aplicaciones más reactivas y eficientes.

// Convertimos un array de tareas en una señal
const tareas = signal(['Tarea 1', 'Tarea 2', 'Tarea 3']);

Para trabajar con el valor de una señal, es necesario suscribirse a ella. Esto se hace ejecutando la señal, lo cual nos permite acceder al valor almacenado.

¿Cómo iteramos sobre un array en Angular?

Para iterar sobre un array en Angular, se utiliza comúnmente la directiva ngFor. Esta permite no solo recorrer los elementos del array, sino también obtener información adicional, como el índice de cada elemento dentro del array.

<!-- Iteración de un array utilizando ngFor -->
<li *ngFor="let tarea of tareas(); index as i">
  {{ i }}: {{ tarea }}
</li>

Aquí se realiza la iteración sobre cada elemento de la señal tareas, imprimiendo tanto su índice como el valor. Esto es especialmente útil para renderizar listas de elementos dinámicos.

¿Cómo se implementan listas de tareas en una aplicación?

Las aplicaciones de lista de tareas típicamente muestran varias tareas en diferentes estados. Estos estados pueden ser:

Completado: La tarea ya ha sido finalizada.
Visualización: La tarea solo se muestra, sin posibilidad de edición inmediata.
Edición: La tarea se puede modificar.

Para manejar estas diferentes presentaciones de una tarea, se podría trabajar con una parte del HTML visual y ajustar el estado de cada tarea según sea necesario.

<div *ngIf="tarea.estado === 'visualización'">
  <span>{{ tarea.label }}</span>
</div>

Implementar mediante Angular y signals permite una experiencia de usuario fluida y eficiente, ya que las actualizaciones de estado se renderizan en tiempo real.

¿Por qué es útil comentar partes del código durante el desarrollo?

Comentar partes del código es una técnica común para prevenir la ejecución de ciertos aspectos del código mientras se trabaja en otros. Esto permite:

Mantener el código limpio: Al ocultar temporalmente código que no se necesita de inmediato.
Facilitar el enfoque: Al permitir que el desarrollador se concentre en la parte relevante del código en desarrollo.
Reutilización rápida: Al mantener fragmentos de código listos para activar en futuras sesiones de desarrollo.

<!-- Comentario de sección en HTML -->
<!-- <div> Esto está temporalmente comentado </div> -->

Esta técnica ayuda a que el desarrollador pueda gestionar más eficientemente su proyecto a medida que se expande y se complica.

Los puntos abarcados aquí representan solo una fracción de lo que se puede lograr con Angular y sus capacidades de control de flujo y renderización dinámica. Seguir explorando y aprendiendo más sobre estas tecnologías te permitirá construir aplicaciones robustas y altamente interactivas. ¡Adelante y continúa tu viaje en el desarrollo web con Angular!

Danny Alejandro fernandez gallego

student•

Solución al Error de Uso de *ngFor en Angular.

Quiero compartir con ustedes cómo resolví un error común al utilizar la directiva *ngFor en Angular, esperando que pueda ayudar a cualquiera que se encuentre con el mismo problema.

Al intentar iterar sobre un arreglo en mi plantilla Angular utilizando *ngFor, me encontré con un error de compilación que indicaba que ni NgFor ni CommonModule habían sido importados correctamente, a pesar de que CommonModule estaba presente en mis importaciones. El código problemático era el siguiente:

<li *ngFor="let toDo as toDo()">

Después de revisar mi código y buscar en la documentación de Angular, me di cuenta de que el problema no estaba relacionado con la importación de módulos, sino con la sintaxis utilizada en la directiva *ngFor. Específicamente, estaba tratando de llamar a una función (toDo()) en lugar de referenciar una propiedad o variable del componente. Además, había utilizado incorrectamente el operador as en lugar de of para iterar sobre los elementos del arreglo.

La solución fue simplemente corregir la sintaxis de la directiva *ngFor en mi plantilla, cambiando el operador as por of y asegurándome de referenciar una propiedad del componente en lugar de llamar a una función. Aquí está el código corregido:

<li *ngFor="let toDo of todos">

Andres Felipe Vargas Gonzalez

student•

Buenas sumercé!

Les traigo atajitos de VSCode que ojalá les guste:

Subraya y ctrl + K + C para comentar en cualquier lenguaje.
Subraya y ctrl + K + U para descomentar en cualquier lenguaje.
Subraya y shift + alt + Down para duplicar una línea de código justo abajo de la original (Re útil en HTML).
Ctrl + B para mostrar o ocultar el explorador de archivos de VSCode.

Espero les guste parceritos, ya les traeré más cuando me encuentre más.

Saludos!

Anyami Cornieles

student•

Gracias la de Ctrl + B no me la sabía

Nicolas Vanegas

student•

Alt + Flecha arriba/abajo: Mueve la línea de código hacia arriba o hacia abajo.

Enna Velasquez Botache

student•

no me imprime la lista

Brenda Sutara

student•

fijate si tenés exportado **CommonModule **, a mi me pasó lo mismo. Te dejo mi código

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; //aqui esta lo que agregué Enna 
import { signal } from '@angular/core';

@Component({
  selector: 'app-labs',
  standalone: true,
  imports: [CommonModule], //aqui esta lo que agregué Enna 
  templateUrl: './labs.component.html',
  styleUrl: './labs.component.css'
})

norelys solorzano

student•

Hola!! a mi tampoco me imprime la lista y tengo todo como lo indica sutarabrenda con el CommonModule en labs y en el principal.

import { RouterOutlet } from '@angular/router'; //
import { signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-labs',
  standalone: true,
  imports: [RouterOutlet, CommonModule], //Aunque le quite el RouterOutlet no me imprime la lista. 
  templateUrl: './labs.component.html',
  styleUrl: './labs.component.css'
})

<code>

David Ceja Zapata

student•

Utilizando la nueva sintaxis de Angular

<ul>
  @for(task of tasks(); track task){
    <li>{{$index + 1}}  {{task}}</li>
  }
</ul>
```\<ul>  @for(task of tasks(); track task){    \<li>{{$index + 1}}  {{task}}\</li>  }\</ul>

Daniel Felipe Varón Quintero

student•

Esta sería una forma sin contador que se puede aplicar en este caso también!

<ul> @for (task of tasks(); track $index;) { <li>{{ $index}} {{ task }}</li> } </ul>

Brigitte Valeria Hidalgo Carrillo

student•

Compartan el html del home por favor

Camilo Enrique Martínez Forero

student•

Si son como yo que la lista no le imprima, deben de tener en cuenta lo siguiente:

1- las importaciones estes bien en este caso que commonModule este importado

2- si tienen todo como el profesor y no les aparece, lo que me funcionó fue escribir la linea del *ngfor de forma manual

Espero que sea de ayuda

Elioenai Garcia

student•

¿Alguién sabe porque nico no tuvo que importar **CommonModule ** para usar ngFor? 🤔

En mi caso lo tuve que hacer manual.

luis jose Estepa Julio

student•

Debes instalar extensión "Auto Import".

Eduardo Lemus Zavala

student•

Uso el código del profesor pero en mi caso no me imprime los elementos de la lista usando el signal:

tasks = signal(['Instalar Angular CLI', 'Crear proyecto', 'Crear componentes']);

</li>

alguna idea de por que?

Juan R Rossano

student•

Quizas me este adelantando pero ¿los estados no pueden ser un array de signals?

Platzi

student•

No, los estados en una máquina de estado no pueden ser un array de signals.

Nicolas Molina

teacher•

Hola, si se puede sería de la siguiente manera:

array = signal([1,2,3]);

Justo eso lo vemos en la siguiente clase!

Viqui Alaro Mamani

student•

AYUDA NO ME IMPRIME LA LISTA

Platzi

student•

Asegúrate de utilizar la etiqueta <pre> y <code> con el operador JSON para imprimir el estado de la lista en formato JSON.

Cristian palacios

student•

Debo tener si o si el array de task dentro de mi componente home.ts? o no?

Germán Arevalo Jerez

student•

Si, es necesario

norelys solorzano

student•

No me imprime la lista, he agregado lo que comento Brenda, importar el CommonModule, pero aun asi no se imprime. me da como error en la consola esto:

"labs.component.html:5 NG0303: Can't bind to 'NgForOf' since it isn't a known property of 'li' (used in the '_LabsComponent' component template).

1. If 'li' is an Angular component and it has the 'NgForOf' input, then verify that it is included in the '@Component.imports' of this component.

2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component."

He intentado en vez de usar <ul><li> un <div> y nada, importe el NgModule y nada... he intentado par de cosas más y nada. No se que mas hacer. si alguien sabe algo y me puede ayudar, muchas gracias.

Usuario anónimo

user•

Me sucedió algo similar, me faltaba el commonmodule, te dejo el código. Espero que te ayude

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {

  task2 = signal([
    'Instalar el Angular CLI',
    'Crear proyecto',
    'Crear componentes'
  ])
}

Alan Damian Fernandez

student•

<section class="todoapp">
  <header class="header">
    <div class="container">
      <h2>My Day</h2>
      <p>All my tasks in one place</p>
      <input
        class="new-todo"
        placeholder="Type new todo"
        autofocus
        type="text"
      />
    </div>
  </header>
  <div class="container todoapp-wrapper">
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <ul class="todo-list">
        <li class="completed">
          <div class="view">
            <input class="toggle" type="checkbox" checked />
            <label>Learn JavaScript</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Learn JavaScript" />
        </li>
        <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Buy a unicorn" />
        </li>
        <li class="editing">
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Make dishes</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Make dishes" />
        </li>
      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>0</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a routerLink="/" class="selected">All</a>
        </li>
        <li>
          <a routerLink="/pending">Pending</a>
        </li>
        <li>
          <a routerLink="/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed">Clear completed</button>
    </footer>
  </div>
</section>

Daniel Mauricio Becerra Rincon

student•

Despues de que hagan todo y quieran darle formato al codigo o el espacio correcto, pueden usar = shift + alt + f con eso les tabula de forma correcta todo el codigo, incluyendo espacios.

Anyami Cornieles

student•

También podemos utilizar los atajos Ctrl+k+c para las líneas o línea de código seleccionadas y Ctrl+k+u para descomentar, en vscode.

Jeysson Alejandro Gómez Garcia

student•

Hola, como seria esto en angular 17:

@Input() set tooltipPlacement(newValue: ${NgxFloatUiPlacements}) { this.placement = newValue as NgxFloatUiPlacements; }

Camilo Enrique Martínez Forero

student•

porque teniendo el mismo codigo que el profesor y las importaciones ¿no me imprime el *ngfor?

Brian Baldeon

student•

Ami tampoco me imprime la lista, le agregué el CommonModule y nada.

No sé que será.

Julio Facundo Alcalde

student•

Agregalo en el imports del Component, de esta forma:

@Component({ selector: 'app-home', standalone: true, imports: [CommonModule], templateUrl: './home.component.html', styleUrl: './home.component.css'})

Santiago Ezequiel Alfonso

student•

Esta buenísimo Angular!!!

Sergio Esteban Diaz Guerrero

student•

Esto está muy cool !!!