Cuando una aplicación deja de usar datos manuales y comienza a consumir información real desde una REST API, el proyecto da un salto significativo hacia un entorno profesional. Angular ofrece herramientas específicas para realizar estas conexiones de forma limpia y tipada, y aquí se explica paso a paso cómo lograrlo utilizando la Platzi Fakestore API, un recurso diseñado para practicar con una estructura de datos muy similar a la que encontrarías en producción.

¿Qué es la Platzi Fakestore API y por qué usarla?

La Platzi Fakestore API [0:22] es una API pública disponible en fakeapi.platzi.com, creada para que estudiantes practiquen con endpoints reales. Su diseño replica escenarios laborales concretos:

• Obtener una lista de doscientos productos generados con ID, título, precio, descripción e imágenes.
• Crear, eliminar y actualizar productos (operaciones CRUD).
• Filtrar productos y aplicar paginación.
• Consultar categorías como subobjetos dentro de cada producto.
• Autenticación con JWT y documentación en Swagger.

Un detalle importante de la estructura de datos es que cada producto ya no contiene una sola imagen, sino un array de imágenes [3:22], lo que permite construir galerías más ricas en la interfaz.

¿Cómo se configura HttpClient en Angular?

Antes de hacer cualquier llamada HTTP, es necesario habilitar el módulo correspondiente en la configuración global de la aplicación.

¿Qué se agrega en app.config?

Dentro del archivo app.config [3:55] se importa provideHttpClient desde @angular/common/http y se registra en el array de providers:

typescript import { provideHttpClient } from '@angular/common/http';

// Dentro de providers: providers: [ provideRouter(routes), provideHttpClient() ]

Este paso es obligatorio. Sin él, cualquier intento de inyectar el HttpClient en un servicio fallará.

¿Cómo se crea el servicio de productos?

Desde la terminal se genera un nuevo servicio dentro de la carpeta shared/services [2:38]:

bash ng generate service shared/services/product

Dentro del servicio se inyecta HttpClient usando la función inject [4:40]:

typescript import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' }) export class ProductService { private http = inject(HttpClient);

getProducts() { return this.http.get<Product[]>('https://api.escuelajs.co/api/v1/products'); } }

El método get recibe un genérico que permite tipar la respuesta. Esto significa que le indicamos a Angular que esperamos un Product[], un array de productos, como resultado de esa petición.

¿Cómo se consume la API desde un componente?

Al cambiar de datos manuales a datos remotos, la interfaz Product necesita un ajuste: el campo image pasa a ser images: string[] [5:30]. Gracias al tipado estricto de TypeScript, el compilador señala inmediatamente todos los lugares donde se usaba el campo anterior, proporcionando feedback temprano para corregir errores antes de ejecutar la aplicación.

¿Dónde se renderiza la primera imagen del array?

En el componente de producto y en el header, donde antes se mostraba product.image, ahora se accede a la posición cero del array [6:40]:

typescript product.images[0]

En el componente de lista de productos se inyecta el servicio y se llama dentro del ciclo de vida ngOnInit [7:22]:

typescript private productService = inject(ProductService);

ngOnInit() { this.productService.getProducts().subscribe({ next: (data) => { this.products.set(data); }, error: (err) => { console.error(err); } }); }

El método subscribe recibe la información cuando la API responde. Con products.set(data) se actualiza la señal (signal) que alimenta la vista, y el bloque error permite gestionar fallos en la petición.

El resultado final es un e-commerce funcional conectado a una API real con doscientos productos, cada uno con título, precio y galería de imágenes. ¿Ya probaste conectar tu proyecto a esta API? Comparte tu experiencia y las dificultades que encontraste en los comentarios.