Learning Angular/

...

/

Fetching Data Through HTTP

Fetching Data Through HTTP

Learn to use HttpClientModule to fetch live data from the Fake Store API.

We'll cover the following...

The product list component uses the products service to fetch and display product data. The data is currently hardcoded into the products property of the ProductsService class.

Setting up HTTP client and API integration

We will modify our Angular application to work with live data from the Fake Store API:

  1. Open the app.module.ts file and import the Angular module of the HTTP client:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ProductsModule } from './products/products.module';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        ProductsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

  1. Now, open the products.service.ts file and import the ...