Angular HttpClient: Your App's API Connector
Angular's HttpClient turns network requests into RxJS Observables. Use it to fetch data or submit forms. The footgun: a request is never sent until you subscribe to the Observable it returns, a common mistake for beginners.
Why it exists
Web applications need to communicate with servers to get data, save user input, and perform other actions. HttpClient provides a standardized, testable, and powerful way to manage these network communications within the Angular framework, integrating seamlessly with its dependency injection and RxJS-based architecture.
The mental model
Think of HttpClient as a highly organized postal service for your app. You give it a letter (an HttpRequest with a URL, method, and body), and it handles the delivery. Instead of waiting for a single reply, it gives you a tracking number (an Observable). You "subscribe" to this tracking number to get updates: when the letter is sent, the progress of its delivery, and finally, the response itself.
How it works
You inject HttpClient into your services or components. Then you call a method like http.get<MyDataType>('/api/data'). This does not send the request immediately; it returns a "cold" Observable. The HTTP request is only dispatched when you call .subscribe() on that Observable. The response is delivered to your subscription's next callback, and errors are sent to the error callback. This RxJS integration allows you to easily chain operations, retry failed requests, or cancel them.
When to use it
Use HttpClient for all standard client-server communication in an Angular application. It's ideal for fetching data from a REST API to populate a view, posting form data to a backend, and handling file uploads or downloads. Its interceptor feature also makes it perfect for centrally managing tasks like adding authentication headers or logging all requests.
When not to use it
For real-time, bidirectional communication like in a chat app or live sports ticker, WebSockets are a better fit than the request-response model of HTTP. For simple, one-off requests where you don't need the power of RxJS or interceptors, the browser's native fetch API can be used, but HttpClient is almost always the idiomatic choice in an Angular project.
One canonical example
A typical use case is creating a service to fetch data. You would first inject HttpClient into your UserService's constructor. Then, you'd create a getUsers() method that calls this.http.get<User[]>('/api/users'). This method returns an Observable. In your component, you would inject the UserService, call getUsers(), and then call .subscribe() on the returned Observable to receive the array of users and display it.
Interview question
When using Angular's HttpClient, what action is necessary to initiate the actual network request to the server?
- a.Calling an HTTP method like http.get() or http.post()
- b.Injecting the HttpClient service into your component or service
- c.Subscribing to the Observable returned by an HttpClient methodCorrect
- d.Specifying the expected response type using a generic, e.g., http.get<DataType>()
Why? this is the answer
The card explicitly states that 'The HTTP request is only dispatched when you call .subscribe() on that Observable.' Calling methods like http.get() merely returns a 'cold' Observable, which does not send the request until subscribed to.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles