Angular Web Framework HTTP Client & API Integration 1 — Questions and Answers
Question 1: Which Angular module must be imported into AppModule to enable HttpClient throughout an application?
- HttpModule
- HttpClientModule (Correct answer)
- HttpClientXsrfModule
- FormsModule
Correct answer: HttpClientModule
HttpClientModule (from @angular/common/http) registers the HttpClient service and must be imported in AppModule or a shared module.
Question 2: What return type does HttpClient.get() produce by default?
- Promise<T>
- Observable<T> (Correct answer)
- Subject<T>
- BehaviorSubject<T>
Correct answer: Observable<T>
HttpClient.get() returns an Observable<T> that emits the parsed response body once the request completes.
Question 3: What is the primary purpose of an HttpInterceptor in Angular?
- To cache HTTP responses in localStorage
- To intercept and transform HTTP requests and responses globally (Correct answer)
- To validate form data before sending
- To compress HTTP payloads automatically
Correct answer: To intercept and transform HTTP requests and responses globally
HttpInterceptor sits in the request pipeline and lets you add headers, log calls, handle errors, or modify responses globally.
Question 4: Which HttpClient request option causes it to return the full HTTP response including status code and headers?
- responseType: 'blob'
- observe: 'response' (Correct answer)
- observe: 'events'
- withCredentials: true
Correct answer: observe: 'response'
Setting observe: 'response' returns an HttpResponse<T> object containing the status, headers, and parsed body.
Question 5: How do you pass query string parameters to an HttpClient.get() request in Angular?
- Append them manually to the URL string
- Use the params option with an HttpParams object or plain object (Correct answer)
- Use the headers option
- Set them in the request body
Correct answer: Use the params option with an HttpParams object or plain object
The params option accepts an HttpParams instance or a plain key-value object that Angular safely encodes and appends to the URL.
Question 6: Which RxJS operator is most appropriate for catching and recovering from HTTP errors in an Angular service?
- map
- tap
- catchError (Correct answer)
- filter
Correct answer: catchError
catchError intercepts an error notification in the observable chain and lets you return a fallback observable or rethrow a transformed error.
Question 7: What decorator is required on a class to allow Angular's DI system to inject HttpClient into it?
- @Inject(HTTP_CLIENT)
- @Injectable() (Correct answer)
- @NgModule()
- @Component()
Correct answer: @Injectable()
@Injectable() marks a class as a participant in Angular's dependency injection, enabling constructor injection of HttpClient and other services.
