No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Componente para producto

5/20
Recursos

Existen muchas situaciones en donde deber谩s enviar informaci贸n de un componente padre a su/s hijo/s, por eso, ac谩 te mostraremos con un ejemplo c贸mo funciona el componente para producto.

Comunicando componente padre a hijo

Un ejemplo real para el uso de la comunicaci贸n entre componente podr铆a ser para renderizar N cantidad de productos de un cat谩logo.

Paso 1: Comienza creando 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: Luego, 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: './image1.jpg'
    },
    {
        id: 2,
        name: 'Mu帽eca de trapo',
        precio: 180,
        image: './image2.jpg'
    },
    {
        id: 3,
        name: 'Pelota de futbol',
        precio: 120,
        image: './image3.jpg'
    }
  ];
}

Paso 3: Este componente 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 -->
<app-producto *ngFor="let p of productos"
    [producto]="p"
></app-producto>

Paso 4: Finalmente, 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;
}

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>

Ser谩 habitual tener la necesidad en tus proyectos de construir componentes m谩s grandes o 鈥渃ontenedores鈥 de muchos otros componentes repetitivos y m谩s peque帽os. Es importante buscar este desacople entre componentes de la mejor manera posible.

Ver c贸digo fuente del proyecto


Contribuci贸n creada con los aportes de Kevin Fiorentino.

Aportes 17

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:





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

Hasta ahora vengo re perdido :c

Siento que es m谩s limpio escribir los componentes as铆:

 <app-product /> 

que as铆

 <app-product > </app-product > 

As铆 vamos 馃
![](

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]=鈥減roduct鈥 *ngFor=鈥渓et 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!

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!