Componente para producto

La forma de inicializar el producto al inicio para que no marque un error está genial, sin embargo, también podemos evitar el error con la siguiente sintaxis:

  @Input('product') product!: Product;

con el signo de exclamación le decimos a Angular (o Typescript) que esa propiedad si va a existir, que no puede ser nula, así que no te preocupes, verás que si la tengo jejeje.

array

[
    {
      id: '1',
      name: 'EL mejor juguete',
      price: 565,
      image: './assets/images/toy.jpg'
    },
    {
      id: '2',
      name: 'Bicicleta casi nueva',
      price: 356,
      image: './assets/images/bike.jpg'
    },
    {
      id: '3',
      name: 'Colleción de albumnes',
      price: 34,
      image: './assets/images/album.jpg'
    },
    {
      id: '4',
      name: 'Mis libros',
      price: 23,
      image: './assets/images/books.jpg'
    },
  ];

Array

  products: Product[] = [
    {
      id: '1',
      name: 'EL mejor juguete',
      price: 565,
      image: 'https://static.platzi.com/media/user_upload/toy-a0d1c980-a8ce-4fa4-83d6-3b016999a162.jpg'
    },
    {
      id: '2',
      name: 'Bicicleta casi nueva',
      price: 356,
      image: 'https://static.platzi.com/media/user_upload/bike-143dcfe9-3190-49fd-88f7-d3bf74182072.jpg'
    },
    {
      id: '3',
      name: 'Colleción de albumnes',
      price: 34,
      image: 'https://static.platzi.com/media/user_upload/books-80160e05-d177-420b-89c5-01a97b2bdb76.jpg'
    },
    {
      id: '4',
      name: 'Mis libros',
      price: 23,
      image: 'https://static.platzi.com/media/user_upload/album-6f4213d5-1d2d-4e0f-96fe-edb36c3255b4.jpg'
    },
    {
      id: '5',
      name: 'Casita michi',
      price: 125,
      image: 'https://static.platzi.com/media/user_upload/house-034b0c04-eeff-42fa-b506-79f18f73ff90.jpg'
    },
    {
      id: '6',
      name: 'Lentes vintage',
      price: 82,
      image: 'https://static.platzi.com/media/user_upload/glasses-05350737-5831-4c98-be55-824399206dba.jpg'
    },
  ];

Ojo a la muñeca, que no vaya a levantarse de repente de esa caja 🤭

Imágenes del proyecto:

Get a ramdon img:

https://source.unsplash.com/random

estos tipos de Inputs y Outputs nos servirán bastante en modales o Pop Up

Así vamos 🤘
![](

Hasta ahora vengo re perdido :c

Siento que es más limpio escribir los componentes así:

 <app-product /> 

que así

 <app-product > </app-product > 

Resumen de la clase:

se crea el componente de product, adicionalmente se crea una interfaz(modelo) para tipar la información del producto.
En el HTML del componente del product se crea la estructura para ver la información de los productos.
En el componente HTML del padre se adiciona el selector del componente product, adicionalmente en el selector se realiza un ngFor para iterar los productos y se realiza un binding con la variable del producto del TS del componente product. EJP:
<app-product [product]=“product” *ngFor=“let product of products”></app-product>
En el TS del componente Padre app se crea un objeto que tiene la información de los productos tapándolo con el modelo de product que se creo al principio.

Con lo de la declaración de un estado inicial, las diferentes maneras para lograr el resultado, evaluando la que mas se adapte a los intereses del desarrollo

Componente para producto

Primero creamos la interfaz del producto, en product.model.ts:

export interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

Creamos el componente con ng g c components/product. En su código:

product.component.ts:

import { Component, Input } from '@angular/core';
import { Product } from 'src/app/models/product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent {
  @Input() product: Product = {
    id: '',
    name: '',
    price: 0,
    image: ''
  }
}

y en product.component.html:

<img [src]="product.image" [alt]="product.name" width="200px">
<h2>${{ product.price }}</h2>
<p>{{ product.name }}</p>

Usamos el componente en app.component.ts:

import { Component } from '@angular/core';
import { Product } from './models/product.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  imgParent = '';

  products: Product[] = [
    {
      id: '1',
      name: 'EL mejor juguete',
      price: 565,
      image: './assets/images/toy.jpg'
    },
    {
      id: '2',
      name: 'Bicicleta casi nueva',
      price: 356,
      image: './assets/images/bike.jpg'
    },
    {
      id: '3',
      name: 'Colleción de albumnes',
      price: 34,
      image: './assets/images/album.jpg'
    },
    {
      id: '4',
      name: 'Mis libros',
      price: 23,
      image: './assets/images/books.jpg'
    },
  ];

  onLoaded(img: string) {
    console.log('log padre!', img); //* img viene del hijo
  }
}

y lo renderizamos en el html de product.component.html:

<app-product *ngFor="let product of products" [product]="product"></app-product>

Nota: la parte de [product]="product" se entiende por el *ngFor.

Bastante interesante!

En el curso de Frontend Developer con Estefany, hicimos esas vistas. Me las copié, sirvió!

Les dejo las dos imagenes por si las quieren descargar

Pero que manera tan fácil de poder enseñar y que se entienda todo a la primera. felicitaciones !!!

Increiíble dicción y pedgaogía practica.
Me gustan estos cursos cortos, con pocos componentes y grandes enseñanzas.

Bastante Interesante!