HTTP in Angular: GET Data from an API

Most real Angular apps talk to a backend. Angular uses HttpClient for API calls.

Step 1: Provide HttpClient

In modern Angular, use:

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

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
});

Step 2: Create an API service

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

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.