Ejercicio de programación con Angular: Gestión de productos de Fake Store API

Modelado de Datos:

• Crear una interfaz Product en un archivo separado (por ejemplo, product.model.ts) que defina las propiedades de un producto según la respuesta de la API FakeStore.

Componentes Angular:

• Componente de Tabla de Productos (products-table): Este componente mostrará una lista de productos en una tabla, con cada fila conteniendo acciones para ver detalles o eliminar el producto.
• Componente de Detalle de Producto (product-detail): Este componente mostrará la información detallada de un producto seleccionado.
• Componente de Formulario de Producto (product-form): Este componente presentará un formulario para crear un nuevo producto o actualizar uno existente.

Servicio de Productos:

• Crear un servicio Angular (product.service) que maneje las operaciones CRUD utilizando la API FakeStore.
  • getProducts(): Para recuperar la lista de productos.
  • getProductById(id): Para recuperar un producto por su ID.
  • createProduct(product): Para crear un nuevo producto.
  • updateProduct(id, product): Para actualizar un producto existente.
  • deleteProduct(id): Para eliminar un producto.

Rutas y Navegación:

• Configurar el enrutador de Angular para navegar entre los componentes de lista de productos, detalle de producto y formulario de creación/edición. Ejemplo de rutas en local:
  • http://localhost:4200/products muestra el listado de productos
  • http://localhost:4200/products/1 muestra el detalle del producto 1
  • http://localhost:4200/products/new muestra el formulario donde crear un nuevo producto
  • http://localhost:4200/products/1/edit muestra el formulario donde editar un producto 1 existente

Interacción con la API:

• Usar el módulo HttpClient de Angular para realizar solicitudes HTTP a la API FakeStore.