forEach en Angular

1. Usando .forEach() en Angular
2. Usando el bucle *ngFor en Angular

Presentaremos la función .forEach() en Angular con un ejemplo y la usaremos para iterar a través de los elementos de un array.

Usando .forEach() en Angular

El .forEach() es una función en Angular que llama a una función para cada elemento en un array.

No se ejecuta para arrays vacías. Se usa solo en archivos .ts y no se puede usar en la plantilla para mostrar ninguna información en los archivos de plantilla en Angular.

La sintaxis de .forEach() es muy sencilla. Comencemos con un ejemplo creando una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Luego de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando:

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Crearemos un array de números del 1 al 10.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Usemos la función .forEach() para console.log el array uno a uno. Entonces, crearemos otra variable, num.

# Angular
num = this.numbers.forEach(x => console.log(x));

Producción:

Como se ve en el ejemplo anterior, podemos usar .forEach() para llamar a una función en cada elemento de un array. Llamemos a una función en esta matriz en lugar de simplemente usar console.log.

En esta función tomaremos como parámetro la variable x que serán los elementos del array, y les añadiremos 10 para devolverlo.

# Angular
function(x){
    x = x + 10; 
    console.log(x);
  }

Ahora usaremos .forEach() para llamar a esa función en cada elemento de nuestra matriz numbers.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num = this.numbers.forEach(x => this.function(x));

Producción:

Como se ve en el ejemplo anterior, la función que pasamos a todos los elementos de un array funcionó y agregó 10 en cada elemento de un array. Pero no podemos usar la función .forEach() en archivos de plantilla para iterar a través de los elementos de un array.

Si queremos iterar a través de los elementos de un array o una lista en archivos de plantilla, podemos usar el bucle *ngFor.

Usando el bucle *ngFor en Angular

El *ngFor es un bucle for en Angular que itera a través de elementos de un array, una lista o un objeto, y se puede usar en archivos de plantilla para mostrar una lista de datos en nuestra aplicación web o sitio web.

Veremos un ejemplo en el que crearemos una lista de lenguajes de programación ampliamente utilizados y mostraremos esa lista en un archivo de plantilla usando el bucle *ngFor.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Crearemos un archivo de clase, language.ts, en el que crearemos un constructor para un idioma. Entonces, el código en language.ts se verá como a continuación.

# angular
export class Language {
  constructor(public name: string, public version: string) {}
}

En app.component.ts, importaremos Idioma.

# angular
import { Language } from './language';

Crearemos una lista de lenguajes de programación.

# angular
ProgrammingLanguages: Language[] = [
    new Language('Angular', '13.1'),
    new Language('React', '17'),
    new Language('Vue', '3.2'),
    new Language('Node', '17'),
  ];

En nuestra plantilla app.component.html, mostraremos nuestra lista usando el bucle *ngFor.

# angular
<main>
  <h2>Widely Used Programming Languages</h2>
  <section>
    <div *ngFor="let language of ProgrammingLanguages">
      <div class="list">
        <h2>{{ language.name }}</h2>
        <p>{{ language.version }}</p>
      </div>
    </div>
  </section>
</main>

En app.component.css, escribiremos algo de CSS para que nuestra salida se vea limpia y fácil de entender.

# angular
.list {
  padding: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid black;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 45%;
  float: left;
}

Producción:

En este tutorial, aprendimos cómo podemos usar la función .forEach() para iterar a través de elementos de un array en archivos typescript y cómo podemos usar el bucle *ngFor para iterar a través de elementos de un array , objeto o una lista en archivos de plantilla y mostrar datos en la interfaz de nuestras aplicaciones web o sitios web.