Cursos Empresas Blog Live Conf Eventos Precios

0:0010:52

Recursos

Resumen

Al igual que con un If, Angular permite iterar un array de números, de cadenas de caracteres o de objetos usando "*ngFor".Si tienes en tu componente un array de datos:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  myArray: string[] = [
    'Platzi',
    'es',
    'genial!'
  ];
}

Puedes mostrar cada elemento iterando el array en un elemento HTML:

<ul>
    <li *ngFor="let str of myArray">
        {{ str }}
    </li>
</ul>

El *ngFor crea una variable temporal llamada str (o el nombre que más te guste) que contiene cada valor de myArray. Finalmente, utilizando una interpolación, muestras el valor de str.Quedando tu HTML de la siguiente manera:

<ul><li>Platzi</li><li>es</li><li>genial!</li></ul>

Índice de iteración

ngFor también cuenta con un índice con el número de iteraciones. Puedes acceder a este número agregando al ngFor index as i de la siguiente manera:

<ul>
    <li *ngFor="let str of myArray; index as i">
        {{ i }}. {{ str }}
    </li>
</ul>

Cada iteración contiene una variable i con el índice que le corresponde. Iniciando desde cero, da como resultado:

<ul>
    <li>0. Platzi</li>
    <li>1. es</li>
    <li>2. genial!</li>
</ul>

Aporte creado por: Kevin Fiorentino (Platzi Contributor).

Uso de *ngFor

Curso de Fundamentos de Angular

Clase 12 de 21

Clase 12 / 21

Piedad Cerón Díaz

Hace 4 años

Reto ngfor 👌 app.component.ts...

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = 'Pia';
  age = 42;
  myImg = 'https://source.unsplash.com/random';
  btnDisabled = true;
  persons=[{
     name: 'Pia',
     age : 45,
     avatar : this.myImg,
     emoji : '😂',
     phone_number: '3175120737',
     birthday: '04/06/1980'
  }]
  person={
    name: 'Pia',
    age : 45,
    avatar : this.myImg,
    emoji : '😂',
    phone_number: '3175120737',
    birthday: '04/06/1980'
 }

  newPerson={
    name: 'Nombre',
    age : 0,
    avatar : this.myImg,
    emoji : '😂',
    phone_number: '########',
    birthday: 'dd/mes/aa'
 }

  newName="";

  emojis = ['😂', '🐦', '🐳','🌮', '💚'];

  toggleButton(){
    this.btnDisabled =  !this.btnDisabled;
  }

  increaseAge(){
    this.person.age +=1;
  }

  decreaseAge(){
    this.person.age -=1;
  }
  onScroll(event: Event){
    const element = event.target as HTMLElement;
    console.log (element.scrollTop);
  }
  changeName(event: Event){
    const element = event.target as HTMLInputElement;
    console.log (element.scrollTop);
    this.person.name= element.value;
  }
  addPerson(){
    this.persons.push(this.newPerson);
    this.newPerson = {
      name: 'Nombre',
      age : 0,
      avatar : this.myImg,
      emoji : '😂',
      phone_number: '########',
      birthday: 'dd/mes/aa'
   };
  }
  removePerson(i:number){
    this.persons.splice(i,1);
  }
}

app.component.html...

<h2>Personas (*ngFor Reto)</h2>
<p>Nombre:<input type="text" required [(ngModel)]="newPerson.name" ></p>
<p>Edad:<input type="text" required [(ngModel)]="newPerson.age" ></p>
<p>Emoji:<input type="text" disabled [(ngModel)]="newPerson.emoji" ></p>
<ul>
  <li *ngFor="let emoji of emojis">{{ emoji }} <button (click)="newPerson.emoji = emoji">Quiero este!</button></li>
</ul>
<p>Teléfono:<input type="text" required [(ngModel)]="newPerson.phone_number" ></p>
<p>Nacimiento:<input type="text" required [(ngModel)]="newPerson.birthday" >
<p><button (click)="addPerson()">Agregar persona</button></p>
<ul>
  <li *ngIf="persons.length === 0; else elseBlockPerson">No hay mas personas para mostrar</li>
  <ng-template #elseBlockPerson>
    <table>
      <thead>
        <tr>
          <th style="">No.</th>
          <th>Emoji</th>
          <th>Nombre</th>
          <th>Edad</th>
          <th>No. de teléfono</th>
          <th>Cumpleaños</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of persons; index as i">
          <td>{{ i+1 }}</td>
          <td>{{ person.emoji }}</td>
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.phone_number }}</td>
          <td>{{ person.birthday }}</td>
          <td><button (click)="removePerson(i)">Quitar</button></td>
        </tr>
      </tbody>
    </table>
  </ng-template>
</ul>

Resultado:

Comentarios (84)84 comentarios

Rony Porraz Vargas

Hace 5 años

Array de emojis

emojis = [ '😂' , '🐦', '🐳','🌮', '💚']

Juan Miguel Jimenez

O puede ser emojis: string[] = [ '😂' , '🐦', '🐳','🌮', '💚'];

Andrés Suarez

Hasta el momento este curso va ordenado, la verdad Nicolás explica de una manera que sinceramente se complementa muy bien con la documentación de Angular. :)

CAMILO ORTIZ CASTILLO

Confirmo!

Johanson Astudillo

Totalmente de acuerdo también!!

Avilio Fernando Amador Soto

¿Alguien más está pensando abandonar React por Angular? 😍

Luis Eduardo

Yo empece por los dos, pero termine enamorandome de Angular gracias a este profe

Wiliams Ixcoy

Yo pienso dejar Vue.js por Angular, aunque los dos tiene su sintaxis muy similar

David Martín Vergués

en el minuto 1:13

creo q hay un pequeño error en cuanto a tipar el array, cuando usamos

names: string[] | number[] = [12, 'david'];

no significa q el array puede contener ambos valores si no que el array puede ser de strings o de numbers, es decir no se pueden mezclar por lo q el ejemplo es erróneo. Para que pueda contener ambos tipos debemos usar any

Andres López

Concuerdo, pero quiero hacer una pequeña corrección y es que si se quieren usar ambos no tipos lo ideal no es usar any, sino indicar los tipos de la siguiente forma:

names: (string | number)[] = [12, 'david']

Usar any es considerado una mala práctica y lo ideal es solo recurrir a este tipo cuando se está migrando de JS a TS y eso que solo como una medida provisional. Si quieren profundizar más pueden ver el curso de Fundamentos de TypeScript

Coondorito Mob

Arturo Malgor

WOW, muy impresionante.

Marco Bolaños

Ulises Rodríguez Candela

Hice un sistema de inventario MUY Básico:

Angular es muy interesante😀

Fabricio Huaquisto Quispe

Esta genial, desde principio ya se pueden hacer cosas como esta.

Miguel Angel Reyes Moreno

Una ligera modificación que haría para mejorar esta lista es que no podamos agregar elementos si el input está vacío. Muy simple de hacer:

<button (click)="addName()" [disabled]="!(newName.length > 0)">Add name</button>

German Pinilla

*++Uso de ngFor++

El *ngFor es otra de las estructuras de control en Angular, que nos sirve para iterar un arreglo de elementos o mas conocido como array.

Esta directiva permite renderizar cada elemento dentro de un array, puede ser un array de strings, enteros, fechas, etc. o de elementos mas complejos como un objeto que tiene distintas propiedades, veamos un ejemplo de uso de *ngFor

Primero definimos el arreglo de elementos en el app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    /* Primero definimos en nuestro componte logico el arreagle de elementos */
    names: string[] = ['Nicolas', 'Julian', 'Susana', 'Andrea']; // <-- Arreglo names
}

Y despues con el databinding de la propiedad names (nuestro arreglo), lo iteramos con la directiva *ngFor en el app.component.html

<ul>
<!-- Iteramos el arreglo names -->
  <li *ngFor="let item of names; let i = index;"> <!-- i es el indice de la posicion del elemento en el array -->
    <label>{{ i }} - {{ item }}</label>
  </li>
</ul>

En nuestra aplicacion podremos ver algo como:

Nicolas
Julian
Susana
Andrea

Aaron Paredes Cabrera

ngFor

Estructura que nos permite iterar un array de elementos. Cadenas, números u objetos.

<h2>ngFor</h2>
<input type="text" required [(ngModel)]="person.name" />
<button (click)="addName(person.name)">Add name</button>
<ul>
  <li *ngIf="names.length === 0">No hay nombres</li>
  <li *ngFor="let name of names; index as i">
    {{i}} {{name}}
    <button (click)="deleteName(i)">Delete</button>
  </li>
</ul>

LUIS ANTONIO CALVO QUISPE

Reto Cumplido ...!

Oscar Adrián Martínez Cavazos

Jimmy Buriticá Londoño

Prefiero dejar el *ngIf afuera de la lista (ul)

<ul>
  <li *ngFor="let name of names; index as i">
    {{i}} {{ name }}
    <button (click)="deleteName(i)">Delete</button>
  </li>
</ul>
<p *ngIf="names.length === 0">No hay nombres</p>

Rosa Maria Aguado Reyes

una duda a mi no me aparece la lista que se creo con ingFor

Kevin J. Zea Alvarado

Hola, Rosa. 👋 Comparte el archivo HTML y el TS, por favor, para saber a qué se debe.

Jhon Jairo Morales Garcia

no entiendo como es que el i es el index justo del elemento al que hay que borrar

Luzan Muga

Hola Jhon,

Cuando se renderizan los elementos en el DOM, cada elemento de la lista es declarada con una acción y un valor de la variable i diferente.

Cada <button (click)="deleteName(i)">Delete</button> a punto a un elemento de la lista diferente.

Yarid Natali Pacheco Moreno

Buenos días profe, Una pregunta!

Como se hace si no se ingresa ningún nombre y se da clic en el botón necesito que no haga ninguna funciona función o no salga nada.

Gonzalo Vidal

Hola Yarid, justo eso implementé en mi local, le pones así:

addPokemon() {
    this.newPokemon && this.pokemons.push(this.newPokemon);
    this.newPokemon = "";
  }

lo cual significa que si this.newPokemon no contiene data ( está vacío ) no agregue nada, el "&&" es el logical AND y en este caso es usado como short-circuit evaluator, si lo de la izq es verdadero se corre lo de la derecha, en caso contrario no se corre lo de la derecha, por lo que si this.newPokemon si tiene algun valor, si lo agregará es lo mismo que colocar un:

 if(this.newPokemon) {
this.pokemons.push(this.newPokemon);
}

Julio Mogollon

No sé si me estoy adelantando un poco, pero la lista permite cargar elementos vacíos, para que eso no suceda, primero añadí required al input y le agregue un name, luego al botón de carga de elementos lo condicione para que verifique si el input es válido, y dependiendo de si es válido (Renderiza el botón) o no es válido (Desaparece el botón)

Quizas haya una forma mas eficaz pero fue la que se me ocurrio, les comparto mi ejemplo:

<h2>*ngFor</h2>
<input type="text" required #newNameInput="ngModel" [(ngModel)]="newName" />
<button (click)="addNewName()" *ngIf="newNameInput.valid === true">Add name</button>
<ul>
  <li *ngIf="names.length === 0" >No hay nombres</li>
  <li *ngFor="let name of names; index as i">
    {{ i }}{{ " " + name }}
    <button (click)="deleteName(i)" >Delete</button>
  </li>
</ul>

Ricardo Rey

Hace 3 años

David Diaz

hice este pequeño ejemplo por si alguien le interesa crear un pequeño crud con listas y formularios. https://github.com/MrRocklion/ejemploFormularioAngular

Nicolas Pantoja Diaz

Algo tranqui

Recursos

Resumen

Uso de *ngFor

Progreso del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

Despedida