Bird
0
0

You want to send a GET request with headers { 'Authorization': 'Bearer abc123' } and query params { 'filter': 'active', 'limit': '10' }. Which code correctly sets both headers and params in Angular?

hard📝 state output Q15 of 15
Angular - HTTP Client
You want to send a GET request with headers { 'Authorization': 'Bearer abc123' } and query params { 'filter': 'active', 'limit': '10' }. Which code correctly sets both headers and params in Angular?
Aconst headers = new HttpHeaders({ Authorization: 'Bearer abc123' }); const params = new HttpParams({ fromObject: { filter: 'active', limit: '10' } }); this.http.get('/api/users', { headers, params }).subscribe();
Bconst headers = new HttpHeaders('Authorization', 'Bearer abc123'); const params = { filter: 'active', limit: '10' }; this.http.get('/api/users', { headers, params }).subscribe();
Cconst headers = new HttpHeaders(); headers.set('Authorization', 'Bearer abc123'); const params = new HttpParams().set('filter', 'active').set('limit', '10'); this.http.get('/api/users', { headers, params }).subscribe();
Dconst headers = new HttpHeaders().add('Authorization', 'Bearer abc123'); const params = new HttpParams().add('filter', 'active').add('limit', '10'); this.http.get('/api/users', { headers, params }).subscribe();
Step-by-Step Solution
Solution:

  1. Step 1: Check header creation

    HttpHeaders constructor accepts a plain object like { Authorization: 'Bearer abc123' } for initial headers.

  2. Step 2: Check params creation

    HttpParams constructor accepts { fromObject: { filter: 'active', limit: '10' } } to set multiple params at once.

  3. Step 3: Verify request call

    Both headers and params are passed correctly in the request options { headers, params }.

  4. Final Answer:

    Use HttpHeaders({ Authorization: 'Bearer abc123' }) and HttpParams({ fromObject: { filter: 'active', limit: '10' } }) -> Option A

  5. Quick Check:

    Use constructors with objects for headers and params = C [OK]
Quick Trick: Use HttpHeaders({}) and HttpParams({fromObject:{}}) for multiple values [OK]
Common Mistakes:
MISTAKES
  • Wrong constructor arguments or plain objects without proper instances
  • Not assigning set() result due to immutability
  • Using non-existent methods like add()

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes
Angular Change Detection - Why change detection matters - Quiz 13medium Angular Change Detection - Why change detection matters - Quiz 2easy Angular Change Detection - Performance impact of change detection - Quiz 3easy HTTP Client - POST requests - Quiz 1easy HTTP Client - Interceptors for request modification - Quiz 11easy Reactive Forms - Why reactive forms are preferred - Quiz 9hard Routing - Child routes and nested routing - Quiz 14medium Routing - Route parameters with ActivatedRoute - Quiz 7medium RxJS and Observables Fundamentals - Observable in component lifecycle - Quiz 10hard Template-Driven Forms - Form submission handling - Quiz 8hard