Search⌘ K
Home
Courses
Learning Angular

Fetching Data through HTTP GET request

Explore how to retrieve product details from a backend API in Angular by implementing HTTP GET requests with HttpClient. Understand transforming data models, updating component code for efficient asynchronous data handling, and integrating observables with the async pipe in templates.

We'll cover the following...

Previously, we used HttpClientModule to fetch live data from the Fake Store API by passing the selected product as an input property from the product list.

Implementing product details retrieval from API

We will get the product details directly from the API using an HTTP GET request:

  1. The Fake Store API contains an endpoint method that you can use to get details for a specific product based on its ID. Currently, there is no ID property in the product model, so first, add one in the product.ts file:

TypeScript 4.9.5
export interface Product {
  id: number;
  name: string;
  price: number; 
}

  1. Open the products.service.ts file and modify the ProductDTO interface to include the id property:

TypeScript 4.9.5
interface ProductDTO {
  id: number;
  title: string;  
  price: number; 
}
...