Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
17H
6M
37S

Detalle de producto

3/23
Recursos

La solicitudes GET suelen utilizarse tanto para obtener un conjunto de registros, como para obtener uno solo. A continuaci贸n conocer谩s m谩s sobre el proceso para crear una aplicaci贸n.

C贸mo obtener un producto por ID

Cuando necesites obtener datos de un registro individual a trav茅s de su ID, el endpoint correspondiente para la petici贸n suele recibir esa informaci贸n como parte de su URL, por ejemplo https://example.com/api/producto/12, para obtener el producto con ID 12.

No es del todo una buena pr谩ctica que un endpoint GET reciba datos por medio de un body. Es posible, pero no recomendable y no es natural en una API Rest. Tenlo en cuenta si eres t煤 quien desarrolla el backend tambi茅n.

// services/api.service.ts
@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    private http: HttpClient,
  ) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`https://example.com/api/productos`);
  }

  getProduct(idProduct: number): Observable<Product> {
    return this.http.get<Product>(`https://example.com/api/productos/${idProduct}`);
  }
}

En el servicio para realizar las peticiones HTTP, el m茅todo getProduct() recibe el ID como par谩metro para concatenarlo a la URL.

Simulando una API

Si no tienes a disposici贸n una API real para construir tu App, puedes simular peticiones HTTP en Angular con lo que se conoce como mock de datos. Un objeto que mantiene la estructura de datos real que tendr谩 la informaci贸n de tu aplicaci贸n.

// services/api.service.ts
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    private http: HttpClient,
  ) { }

  getProduct(idProduct: string): Observable<Product> {
    return of(
      {
        id: 1,
        name: 'Automobil de juguete',
        precio: 100,
        image: 'https://static3.depositphotos.com/1000865/118/i/600/depositphotos_1183767-stock-photo-toy-car.jpg'
      }
    );
  }

}

Utilizando la funci贸n of import谩ndola desde RxJS, esta funci贸n convierte lo que sea que le env铆es como par谩metro, en un observable.

De esta manera, tu componente recibir谩 la respuesta del observable como si fuese una API real que responde datos para construir tu aplicaci贸n.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 11

Preguntas 9

Ordenar por:

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

o inicia sesi贸n.

.product-detail {
  position: fixed;
  top: 0;
  left: 50%;
  bottom: 0;
  right: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all ease-out .5s;
  transform: translateX(100%);
  &.active{
    transform: translateX(0);
  }
}

Interesante como ejercicio, sin embargo en la practica el componente products habia previamente traido toda la informaci贸n en el metodo ngOnInit cuando inicia la aplicaci贸n. Por tanto hay una alternativva a la implementaci贸n del metodo onShowDetail:

onShowDetail(id: number){
    let prod = this.productos.find(ele => {return ele.id == id});
    console.log('id: ',prod);
}
no creo que siempre e bien visto mandar a llamar servicios cuando ya tienes la informacion de producto en en cache solo es enviarle al event todo el obj ya que al final es la misma informacion que vas atener a menos que los eso depende de las reglas de negocio pero eres buen profesor algo despistado pero vamos bien..

En el minuto 5:11, alguien me podr铆a explicar como se conecta el boton con el id que le corresponde a ese producto, no logro comprender como funciona esa conexi贸n, o sea como al dar click en el boton 鈥渧er detalle鈥, la petici贸n sabe cual es la id que le pertenece a ese producto agradezco mucho una respuesta.

He visto este video m谩s de 5 veces y no entiendo de donde sale el id

En este momento no me funciono swiper, use ngx-owl-carousel-o y me funciono. segu铆 los pasos ac谩.
https://www.npmjs.com/package/ngx-owl-carousel-o#get-started

Buenas tardes. Alguien sabe como se sacan esas comillas? ![](https://static.platzi.com/media/user_upload/image-28f46b3e-3396-4460-ad36-673a82477023.jpg)

En vez de hacer un llamado nuevamente a la API en el componente product podr铆as hacer lo mismo pero sin llamar a la API

showDetailsProduct() {
    console.log(this.product);
}

De esta manera te dar铆a los detalle de cada producto sin necesidad de hacer un llamado a la api o usar un metodo de javascript.

Esto es m谩s de Typescript, pero una buena pr谩ctica para indicar que un m茅todo va a recibir el鈥 id鈥 (o cualquier propiedad) de un modelo que hayamos definido, en lugar de decir:

get(id: string) {
	// code...
}

Pudi茅ramos tipar el 鈥榠d鈥 (o par谩metro que vayamos a recibir) usando el mismo modelo, indicando la propiedad que queremos usar de la siguiente manera:

get(id: Product['id']) {
	// code...
}

As铆, Typescript obtendr谩 el tipado de esa propiedad que est谩 definida en nuestro modelo, y si en alg煤n momento debemos cambiar el tipado de la propiedad, solo lo cambiar铆amos en la interfaz y autom谩ticamente los m茅todos que hacen referencia a esa propiedad se actualizar谩n. Sin necesidad de ir a cambiar el tipo en cada m茅todo donde la estemos usando.

隆Espero le sirva a alguien!! 馃槂

No se puede ver la api y qued茅 trabado 馃槙

Usamos el output para mandarle informaci贸n del componente hijo al padre y que muestre la informaci贸n cuando hacemos click en el bot贸n del componente hijo.