TypeScript / ngFor

Bienvenidos sean a este post, hoy veremos un bucle.

En el post anterior vimos como podemos mostrar datos enviados por la clase hogar mediante ubicacion-viviendas pero por el momento solo mostrara un dato. Para lograr mostrar mas de un dato necesitaremos utilizar a ngFor pero para ello necesitaremos a nuestro proyecto, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser utilizado. Lo primero que haremos sera ir a hogar.component.ts y modificaremos el bloque donde exportamos la clase de la siguiente manera:

export class HogarComponent {
  readonly url = 'https://angular.io/assets/images/tutorials/faa';

  listaUbicacionViviendas: Ubicacionviviendas[] = [
    {
        id: 0,
        nombre: 'Casa inicial',
        ciudad: 'Santa Rosa',
        pcia: 'CBA',
        foto: `${this.url}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`,
        wifi: false
    },
    {
        id: 1,
        nombre: 'Departamento Universitario',
        ciudad: 'Cordoba',
        pcia: 'CBA',
        foto: `${this.url}/brandon-griggs-wR11KBaB86U-unsplash.jpg`,
        wifi: true
    },
    {
        id: 2,
        nombre: 'Casa grande y antigua',
        ciudad: 'Alta Gracia',
        pcia: 'CBA',
        foto: `${this.url}/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg`,
        wifi: false
    },
    {
        id: 3,
        nombre: 'Casa confortable',
        ciudad: 'Villa General Belgrano',
        pcia: 'CBA',
        foto: `${this.url}/ian-macdonald-W8z6aiwfi1E-unsplash.jpg`,
        wifi: true
    },
    {
        id: 4,
        nombre: 'Casa moderna',
        ciudad: 'Embalse',
        pcia: 'CBA',
        foto: `${this.url}/krzysztof-hepner-978RAXoXnH4-unsplash.jpg`,
        wifi: true
    },
    {
        id: 5,
        nombre: 'Casa final',
        ciudad: 'Santa Monica',
        pcia: 'CBA',
        foto: `${this.url}/r-architecture-JvQ0Q5IkeMM-unsplash.jpg`,
        wifi: true
    }
  ];
}

Basicamente es lo mismo que teniamos antes pero agregamos cinco casas mas, pero tambien hicimos otras modificaciones. La primera es que transformamos el dato en array, del mismo tipo pero array, tambien le cambiamos el nombre. El formato de cada dato es igual que antes pero agregamos algunos para diferenciarlos. Con esto ya tenemos nuestros datos pasados pero si lo verifican la pagina tiene un error porque no sabe como procesar estos nuevos datos. Para ello en el mismo archivo iremos a la propiedad template en @Component y lo modificaremos de la siguiente manera:

  template: `
        <section>
          <form>
            <input type="text" placeholder="Filtrar por ciudad">
            <button class="primary" type="button">Buscar</button>
          </form>
        </section>
        <section class="resultados">
          <app-ubicacion-viviendas
                *ngFor="let ubicacionViviendas of listaUbicacionViviendas"
                [ubicacionViviendas]="ubicacionViviendas">
                </app-ubicacion-viviendas>
        </section>
  `,

En este caso solo hicimos una modificacion, dentro de la seccion resultados tomamos al tag encargado de mostrar el contenido y le agregamos a ngFor, el cual actua como un for mejorado o generico, como lo conozcas, y devolvera cada elemento que posea la coleccion que le informemos.. Esta es la razon por la que le cambiamos el nombre al listado de casas. Y el dato que enviamos tiene el mismo nombre que antes para que sigamos utilizando la estructura anterior. Con esto realizado, la pagina debe funcionar nuevamente y verse de la siguiente manera:

Como pueden ver al poder procesar cada elemento por separado y manteniendo el nombre que usamos en el post anterior nos permitio obtener toda la informacion y mostrarla con minimos cambios.

El bucle que utilizamos se aplica directamente en los tags que tengamos disponibles, en nuestro codigo lo aplicamos al tag encargado de nuestra seccion y este le enviara la informacion mediante la estructura [atributo] = «valor». Esto tambien podemos aplicarlo a tag de tipo HTML, su sintaxis es siempre:

*ngFor="let variable of coleccion"

Donde variable sera la encargada de recibir la informacion de la coleccion en cada pasada y coleccion es el objeto que pasara la informacion a procesarse. Antes de finalizar les dejo un link con todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos visto a ngFor, para que sirve, como se utiliza y vimos como trabaja y aplicarlo mediante un codigo. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.