CursosEmpresasBlogLiveConfPrecios

Componentes en Angular: Creación y Organización de Productos

Clase 8 de 20 • Curso de Angular: Componentes y Servicios

Clase anteriorSiguiente clase
Resumen

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.