.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);
}
}
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Detalle de producto
3/23Recursos
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 12
Preguntas 8
Ordenar por:
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 “ver 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
cambiaron la api 7u7
cambiaron el formato y ahora hay solo 3 productos mal hechos...
Buenas tardes.
Alguien sabe como se sacan esas comillas?
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 ‘id’ (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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?