Proyecto: creando product component
Clase 12 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Nicolas Molina
teacher•
hace 4 años
Clase 12 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Nicolas Molina
Cesar Elías Armendariz Ruano
Ana Velez Ossa
José Valentin Abundo Hernandez
Adrian Silva
La API que se esta usando es esta 👉
Normalmente utilizamos nuestras dependencias para conectar nuestros servicios y los servicios conectar con nuestros components.
primero creamos el componente product
ng g c components/product
luego hacemos que obtenga el producto a renderizar con un Input
product.component.ts
import { Component, Input, OnInit } 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 implements OnInit { @Input() product!: Product; constructor() { } ngOnInit(): void { } }
hacemos que se renderize en el html
product.component.html
<div> <figure> <img [src]="product.images[0]" alt=""> <figcaption> {{product.title}} - {{product.price}} </figcaption> </figure> <p>{{ product.description }}</p> </div>
finalmente lo integramos en products component
products.component.html
<section class="container"> <h2>Products Component</h2> <div class="my-grid"> <app-product *ngFor="let product of products" [product]="product"> </app-product> </div> </section>
<img src="https://picsum.photos/id/{{product.id}}/400/?blur" alt="">
Si no esta visualizando la imagen con [src]="product.images[0]"
Si las imagenes no se ven puedes modificar un poco el servicio getAll
getAll(limit?: number, offset?: number): Observable<Product[]> { let params = new HttpParams(); if (limit && offset != null) { params = params.set('limit', limit); params = params.set('offset', offset); } return this.http.get<Product[]>(`${this.apiUrl}/products`, { params }) .pipe( retry(3), map(products => products.map((item, idx) => { return { ...item, taxes: item.price > 0 ? .19 * item.price : 0, images: item.images.map(() => `https://picsum.photos/200?random=${idx}`) } })) ); }
Cuando arranqué esta saga de curso de testing, me costó bastante entenderlo, pero ya me estoy sintiendo bastante comodo con este tema. Gracias a Jehová primeramente y al equipo de Platzi👏👏👏