No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Lista de productos

8/20
Recursos

Haciendo uso de los decoradores de Angular para comunicar componentes. Puedes crear una lista de productos y con unas pocas líneas de CSS crear un layout para visualizar los productos de una forma más agradable.

Comunicando con múltiples componentes hijos

Haciendo uso de un ngFor, puedes crear y comunicarte con N cantidad de componentes hijos. Veamos un ejemplo:

Paso 1: Crea una interfaz para tipear el modelo de datos del Producto.

// interfaces/producto.interface.ts
export interface Producto {
    id: number;
    name: string;
    precio: number;
    image: string;
}

Paso 2: Impórtala en el componente catálogo que será el componente padre en la comunicación.

// components/catalogo/catalogo.component.ts
import { Component } from '@angular/core';
import { Producto } from './producto.interface.ts';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent {

  public productos: Producto[] = [
    {
      id: 1,
      name: 'Automobil de juguete',
      precio: 100,
      image: 'https://static3.depositphotos.com/1000865/118/i/600/depositphotos_1183767-stock-photo-toy-car.jpg'
    },
    {
      id: 2,
      name: 'Muñeca de trapo',
      precio: 180,
      image: 'https://kinuma.com/8869-home_default/muneca-de-trapo-mali.jpg'
    },
    {
      id: 3,
      name: 'Pelota de futbol',
      precio: 120,
      image: 'https://media.istockphoto.com/photos/soccer-ball-isolated-3d-rendering-picture-id1257575611?k=20&m=1257575611&s=612x612&w=0&h=g530fFJspT42xFGY7HycLvpBKLXpJ2XAkKCRyY-SK80='
    },
    {
      id: 4,
      name: 'Castillo',
      precio: 220,
      image: 'https://i.imgur.com/44nzvkQ.jpg'
    }
  ];

  constructor() { }
}

Paso 3: l componente catálogo posee un array de productos para iterar en el HTML inicializando el componente <app-producto> por cada objeto en el array.

<!-- components/catalogo/catalogo.component.html -->
<h1>Catálogo Platzi</h1>
<div class="catalogo">
    <app-producto *ngFor="let p of productos"
        [producto]="p"
    ></app-producto>
</div>

Paso 4: El componente hijo recibe el producto haciendo uso del decorador @Input() y apoyándose también de la interfaz para tipear los datos.

// components/producto/producto.component.ts
import { Component, Input } from '@angular/core';
import { Producto } from './producto.interface.ts';

@Component({
  selector: 'app-producto',
  templateUrl: './producto.component.html',
  styleUrls: ['./producto.component.scss']
})
export class ProductoComponent {

  @Input() producto: Producto;

  constructor() { }
}

Pudiendo mostrar la información del producto en el template del componente hijo:

<!-- components/producto/producto.component.html -->
<div>
    <h2>{{ producto.name }}</h2>
    <img [src]="producto.image">
    <p>Precio: {{ producto.precio }}</p>
</div>

Paso 5: En este punto, los productos quedarán uno debajo del otro. Con un poco de Flex Box en la hoja de estilos del catálogo, puedes presentar los productos uno al lado del otro:

.catalogo {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

Quedando de la siguiente manera:
lista de productos.png

Ya luego podrás darle los mejores estilos de acuerdo al diseño aplicando CSS en la hoja de estilos del producto.

Ver código fuente del proyecto


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 8

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Impresionante como conseguimos adaptar la lista de productos con tan pocas líneas de CSS, definitivamente tomare el curso de CSS de Grid Layout

tal vez seria buena idea nombrar los componentes un poco diferente para evitar errores a la hora de importarlos y que la busqueda sea mas facil, en lugar de tener product y products podria ser product y list-product o algo asi

A lo mejor utilizar algo como auto-fill sería más práctico

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

Cuando se enseña a alguien que está comenzando desde cero hay que ser limpio, ordenado y claro en las explicaciones.

Pero a mitad de curso reorganizar un proyecto que se ha usado para explicar conceptos moviendo líneas de un componente a otro, aparte de las explicaciones confusas y poco concisas, no ayuda para nada.

Me parece mucho mejor manera el explicar los conceptos trabajando sobre un proyecto en “sucio” y luego crear un proyecto sobre el que aplicar esos conceptos de manera limpia y ordenada.

Creo que lo mas adecuado seria hacer un proyecto únicamente para ejemplos y para teoría y uno especifico para el proyecto como tal.
De esta manera el código queda demasiado sucio y en mi caso que no tengo experiencia con angular se me complica un poco seguir el hilo a lo que estoy haciendo.

Es bueno tener en consideración que cada vez que desees hacer una importación, bien sea de un operador, interfaz, componente, etc etc. Puedes presionar Ctrl + ( . ) para ingresar a la ayuda rápida. De esa manera no tienes que estar memorizando donde estan tus componentes o interfaces para poder implementarlas.

![](

Like si viste al mosquito al finalizar el video, este hace parte del team platzi. ❤️

Puedes usar ctrl + p o simplemente F1 en vscode para ejecutar scripts