HTTP in Angular: GET Data from an API
Fetch data from a backend using HttpClient with a clean service-based approach.
Most real Angular apps talk to a backend. Angular uses `HttpClient` for API calls. ## Step 1: Provide HttpClient In modern Angular, use: ```ts import { provideHttpClient } from '@angular/common/http'; bootstrapApplication(AppComponent, { providers: [provideHttpClient()], }); ``` ## Step 2: Create an API service ```ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; export type Product = { id: number; title: string; price: number }; @Injectable({ providedIn: 'root' }) export class ProductsApi { constructor(private http: HttpClient) {} getProducts(): Observable<Product[]> { return this.http.get<Product[]>('/api/products'); } } ``` ## Step 3: Use it in a component ```ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProductsApi, Product } from './products.api'; @Component({ selector: 'app-products', standalone: true, imports: [CommonModule], template: ` <h2>Products</h2> <ul> <li *ngFor="let p of products">{{ p.title }} - ${{ p.price }}</li> </ul> `, }) export class ProductsComponent { products: Product[] = []; constructor(private api: ProductsApi) { this.api.getProducts().subscribe(data => (this.products = data)); } } ``` > Next: Observables explained, because HttpClient returns Observables.