NgFor aplicado en la lista de usuarios

Clase 17 de 63 • Curso de Angular 6 2018

Resumen

NgFor es una directiva estructural que afecta (agrega, modifica o elimina) un elemento HTML. Las directivas estructurales las identificamos porque llevan un * antes de la directiva, por ejemplo: *ngFor

NgFor nos permite recorrer un arreglo de datos y por cada elemento generar o imprimir en el DOM un elemento HTML nuevo, con algún valor cambiado basado en el elemento leído del arreglo.

Anthony Gonzalez

student•

Usuarios extras:

let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email:'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };

Mariano Villarreal

student•

Capa sin heroe

Mario Alejandro Cortez Salinas

student•

Perfecto, pueden cambiar de una vez los uid ya que aquí solo les pone 1 y mas adelante se necesita que cada elemento tenga id’s diferentes

Jhon Castrillon

student•

Id Diferentes

let usuario1: User = { nick: 'Eduardo', age: 24, email: 'ed@aoe.aoe', friend: true, uid: 1 }; let usuario2: User = { nick: 'Freddy', age: 28, email: 'fred@aoe.aoe', friend: true, uid: 2 }; let usuario3: User = { nick: 'Yuliana', age: 18, email: 'yuli@aoe.aoe', friend: true, uid: 3 }; let usuario4: User = { nick: 'Ricardo', age: 17, email: 'rick@aoe.aoe', friend: false, uid: 4 }; let usuario5: User = { nick: 'Marcos', age: 30, email:'marcos@aoe.aoe', friend: false, uid: 5 };

Alfonso Navarro

company_admin•

Gracias compañero por tu aporte

Diego Ortiz

student•

Una sintaxis alterna para el let i = index es index as i. Es un poco más corta, y me parece más fácil.

Joiss Ventura Rivera

student•

Muy buen aporte.

Luis Miguel Ramos Hernández

student•

Para no imprimir el index podría utilizarse una lista que lo genere por defecto

<ol>
  <li *ngFor="let friend of friends">
    {{friend.nick}} - {{friend.email}}
  </li>
</ol>

Usuario anónimo

user•

Muy buena recomendación.

Jeison Sneider Ruiz Zemanate

student•

home.component.html---->

<p *ngFor="let user of friends; let i = index">
 {{i}}. {{user.nick}} - {{user.email}}
</p>

home.component.ts —>

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email:'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };
    this.friends = [usuario1,usuario2,usuario3,usuario4,usuario5];
  }

  ngOnInit() {
  }

}

Gonzalo Muñoz

student•

No olvidar el método push para agregar campos a los arrays:

this.friends.push(user1, user2, user3, user4, user5);

Tatiana Rios

student•

todo en ingles, pero cuando hay que decir 'array' dice 'arreglo'

Ramiro Mendoza Alvarez

student•

el buen spanglish haciendose presente jajaja

Carlos Uriel de Jesus Sánchez González

student•

home.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor() {
    /*let c: number = 1;
    let b: number = 2;
    console.log(c + b);
    let e: string = '1';
    let f: string = '2';
    console.log(e + f);
    let g: boolean = true;
    let h: object = {};
    console.log(g);
    console.log(h);
    let i = [c, b, e, f, g, h];
    console.log(i);
    let j: boolean [] = [true, g];
    console.log(j);
    let l: object [] = [{}, h];
    console.log(l);
    let k: any [] = [1, 'qwe', {}, [], true];
    console.log(k);
    let myuser: User = {
      nick: 'Uriel',
      // subnick: 'Uriel',
      age: 36,
      email: 'a@a.com',
      friend: true,
      uid: 1
    };
    console.log(myuser);
    let users: User[] = [
      myuser
    ];
    console.log(users);*/

    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

  }

  ngOnInit() {
  }

}

home.component.html

<p *ngFor="let user of friends; let i = index" >
  {{i + 1}}. {{user.nick}} - {{user.email}}
</p>

Jecsham Castillo

student•

Pueden omitir el 0 escribiendo en la variable del template {{i + 1}}

saulo bravo

student•

buenas me sale este error DevTools failed to parse SourceMap quien me puede ayudar

gracias

Cristian Andres Cañon Recalde

student•

no me funciona!

Daniel Stiven Amador Arias

student•

Debes encerrar el indice en doble llave {{ i }}

Diego Fernando Orozco Torres

student•

{{user.nick}} - {{user.email}}, el nick lo tienes como Use.nick

Joiss Ventura Rivera

student•

Les muestro otra forma de realizar lo que el profe realizó en la clase. Espero sea de ayuda. Cualquier duda estaré atento consulten fast :3

Francisco Samuel Lesmes Fajardo

student•

Donde Se encuentra el sistema de Archivos?

Diego Forero

Team Platzi•

Se encuentra en la columna derecha en la clase, en la pestaña más a la derecha.

Puedes ver que hay 4 pestañas, Aportes, Preguntas, Marcadores, Archivos y Enlaces

Francisco Samuel Lesmes Fajardo

student•

Muchas Gracias por la respuesta efectivamente los encontré, Gracias

Cristian Palta

student•

buenas clases

Manuel Esteban Rodríguez Gómez

student•

Vscode al escribir en el home.component el codigo {{user.nick}} - {{user.age}} concretamente al escribir user. no me da ninguna posible solución. ¿Alguien sabes una solución?

let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email:'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email:'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };
    this.friends = [usuario1,usuario2,usuario3,usuario4,usuario5];
  }

  ngOnInit() {
  }

}

import { Component, OnInit } from '@angular/core';
import { User } from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  friends: User[];
  constructor() {
    /*let c: number = 1;
    let b: number = 2;
    console.log(c + b);
    let e: string = '1';
    let f: string = '2';
    console.log(e + f);
    let g: boolean = true;
    let h: object = {};
    console.log(g);
    console.log(h);
    let i = [c, b, e, f, g, h];
    console.log(i);
    let j: boolean [] = [true, g];
    console.log(j);
    let l: object [] = [{}, h];
    console.log(l);
    let k: any [] = [1, 'qwe', {}, [], true];
    console.log(k);
    let myuser: User = {
      nick: 'Uriel',
      // subnick: 'Uriel',
      age: 36,
      email: 'a@a.com',
      friend: true,
      uid: 1
    };
    console.log(myuser);
    let users: User[] = [
      myuser
    ];
    console.log(users);*/

    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 1
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 1
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 1
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];

  }

  ngOnInit() {
  }

}

NgFor aplicado en la lista de usuarios

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos