HttpClient is an Angular service for making asynchronous HTTP requests and receiving responses as RxJS observables. Inject it into a data-source class, then call a method such as get or post for a RESTful web service. section 23.3.1 section 6.6
Choose the method that matches the HTTP operation:
- get(url) retrieves data; post(url, body) submits an object; put(url, body) replaces data. section 23.3.1
- patch(url, body) partially updates data; delete(url) removes it. section 23.3.1
- head(url) requests headers without a response body; options(url) sends an OPTIONS request. section 23.3.1
- request(method, url, options) supports a request with any HTTP verb. section 23.3.1
Typed product request
Inject HttpClient and return a typed observable: `constructor(private http: HttpClient) { }` followed by `getData(): Observable<Product[]> { return this.http.get<Product[]>(REST_URL); }`. The type parameter causes JSON data to be represented as Product[], while subscription triggers the request. section 23.3.1
Listing 23.5. The contents of the rest.datasource.ts file in the src/app/model folder
import { Injectable, Signal } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Product } from "./product.model";
import { Observable } from "rxjs";
export const REST_URL = `http://${location.hostname}:3500/products`;
@Injectable()
export class RestDataSource {
constructor(private http: HttpClient) { }
getData(): Observable<Product[]> {
return this.http.get<Product[]>(REST_URL);
}
}
Use the complete RestDataSource listing to see HttpClient injection, a REST endpoint constant, and a typed GET method together. section 23.3.1
Enable HttpClient through HttpClientModule, provide the data-source service, and adapt repositories to consume its observables or convert them to signals. Network delay, repeated subscriptions, cross-origin rules, and user-visible HTTP errors require explicit application handling. section 6.6.1 section 23.8
