Creación y Reutilización de Componentes en Angular para Tiendas

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.

Kevin Bueno

Genial! una solución bastante limpia

Christian Michelle Torres Martínez

Así es, es la manera en como yo inicializo, no sé si sea la mejor practica, pero es la que se me hizo más rápida

Genix Xavier Granados Elias

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'
    },
  ];

Misael Valdez

Que eficiencia!!

Juan Camilo Martinez Cano

te quiero mucho persona que hizo esto

Kevin Bueno

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'
    },
  ];

Pol Valle

Gracias

Misael Valdez

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

Jimmy Buriticá Londoño

Me dio la misma sensación :)

Eliseo Ávila

Imágenes del proyecto:

Darwing Steven Sánchez Londoño

Get a ramdon img:

https://source.unsplash.com/random

Diego Fernando Caviedes Camaho

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

Paula Andrea Sierra Alba

Así vamos 🤘 ![](

Facundo Peralta

Hasta ahora vengo re perdido :c

Lorena Barragan

Yo también estoy re perdida :c

Milton Estrada

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

 <app-product />

que así

 <app-product > </app-product >

Edwin Mauricio

¿Por qué el tipado de Product no puede ser un class sabiendo que luego necesitaría un método o transformación del su precio por ejemplo?.

Nicolas Molina

Profesor

Hola, es una gran pregunta y si es una opción, es decir si se puede generar una clase en donde también estén esos métodos sin embargo eso hace que tengamos que hacer un proceso más desde el lado de frontend es decir cuando una API nos retorne la información en JSON tendemos que recorrer cada uno y volverlo una clase lo cual añade procesamiento, lo más normal es que el backend ya envíe los datos procesados y nosotros solo hacemos el render. Las transformaciones si son formatos de cara al render es mejor hacerlo por medio de pipes.

Aquí una lectura recomendada sobre interfaces vs clases.

Javier Alexander Taberoa Jiménez

¿Por qué no tener los datos de los productos en el mismo componente de "products", para qué enviamos la información del componente padre al hijo?

Nicolas Molina

Profesor

Hola esto tiene que ver más con un patrón de arquitectura en donde separamos responsabilidades de un componente contenedor y un componente prestacional, el componente contenedor encarga de cosas más lógicas como obtener la información, el componente prestacional solo se encarga renderizar información nada de lógica compleja, eso hace que sea más fácil de mantener, tambien se puede conocer como Smart and dumb component.

Jonathan Gonzalez Botero

Al final del dia es por buenas practicas de programacion, no podemos mezclar la logica de negocio con la informacion que solo queremos renderizar del componente.

Piensalo como si los componentes fueran fichas de Lego, no queremos mezclar todo con todo, es mejor tener piezas por separado, que cada una(en nuestro caso los componentes) haga su funcion y al final del dia unimos todo

Jonatan Tobar

¿la carpeta models tiene siempre que estar al nivel de la carpeta components?, ¿si la aplicación es muy grande no es mejor que cada componente maneje sus propios modelos????

Gabriel Zapata

realmente no importa donde los pongas, lo que importa es conocer la ruta para cuando los tengas que importar, sin embargo, si un mismo model es compartido por varios componentes, sería entonces más cómodo tenerlo en un nivel más arriba que el componente

Miguel Sierra

No, no es necesario que este al mismo nivel. Y como bien lo dices para proyectos grandes se manejen carpetas diferentes. Lo realmente importante es saber como llegar a la ruta, saludos.

Brenda Sutara

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

Daniel Castiblanco

Estoy intentando hacer exactamente lo mismo traer del padre un objeto llamado peopleList. Este solo tendría datos como "name" y "birth"

export interface People {
  name: string;
  birth: string;
}

Pero al enviar el Input en el HTML

<app-birthday-records [data]="peopleList" *ngFor="let data of peopleList"></app-birthday-records>

tengo este error en "data" : Type 'People[]' is missing the following properties from type 'People': name, birthngtsc(2739)

Esto no lo comprendo por que en el decorador lo estoy colocando tal cual esta en el interface:

  @Input('data') peopleList: People = {
    name: '',
    birth: '',
  };

Porfavor porfavor un ayudita a entender el por que ocurre esto.

Nicolás Castro Barón

Tienes un error en el valor que recibe el input en el componente padre, estás enviado peopleList y debería ser data que es el que se define en el ngFor, esta sería la forma correcta:

<app-birthday-records [data]="data" *ngFor="let data of peopleList"></app-birthday-records>

También te recomendaría mejorar el nombre de los objetos, como por ejemplo en la definición del Input no hace falta el bindingPropertyName ++data++, un nombre adecuado sería ++people++ ya que recibe un objeto individual y no una lista de ellos, esto con el fin de buenas prácticas, mejorar comprensión del código y minimizar errores.

@Input people: People = {
    name: '',
    birth: '',
  };

Y también modificar el componente padre:

<app-birthday-records [people]="people" *ngFor="let people of peopleList"></app-birthday-records>


Saludos!

Harold Jara

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.

Diego Jurado

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

Miguel Angel Reyes Moreno

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">
<h3>${{ product.price }}</h3>
<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.

Emilio Senguana

Bastante interesante!

alberto ayala rodriguez

se podría considerar los siguiente una buena práctica para inicializar los productos: @Input product: Product = {} as Product;

donde Product es nuestra interface

Jimmy Buriticá Londoño

La forma en que escribes no es correcta, la probé para estar seguro y el compilador muestra un error. Al escribir

product: Product

Ya estas informando al compilador que la variable product es de tipo Product. Por otro lado en el ejemplo dado por el profesor Product te obliga a inicializar el objeto y la sentencia completa queda así:

@Input() product: Product = {
  id: '',
  price: 0,
  image: '',
  name: ''
};

Daniel Rafael Ramirez Burgos