Setting headers and params in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HttpHeaders class.

Angular

import { HttpClient, [1] } from '@angular/common/http';

Drag options to blanks, or click blank then click option'

AHttpHeaders

BHttpResponse

CHttpRequest

DHttpParams

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpParams instead of HttpHeaders.

Forgetting to import HttpHeaders at all.

The HttpHeaders class is imported from @angular/common/http to set HTTP headers.

2fill in blank

medium

Complete the code to create a new HttpHeaders object with a custom header.

Angular

const headers = new HttpHeaders().set('[1]', 'application/json');

Drag options to blanks, or click blank then click option'

AContent-Type

BAuthorization

CAccept

DCache-Control

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Authorization' when no token is needed.

Using 'Accept' instead of 'Content-Type'.

The Content-Type header tells the server the format of the data sent.

3fill in blank

hard

Fix the error in setting multiple HTTP params.

Angular

const params = new HttpParams().[1]('page', '1').append('limit', '10');

Drag options to blanks, or click blank then click option'

Aset

Bappend

Cadd

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' twice, which overwrites the first param.

Using non-existent methods like 'add' or 'push'.

The append method adds a new value without replacing existing ones, allowing chaining.

4fill in blank

hard

Fill both blanks to create headers and params for an HTTP GET request.

Angular

this.http.get(url, { headers: new HttpHeaders().[1]('Authorization', 'Bearer token'), params: new HttpParams().[2]('search', 'angular') });

Drag options to blanks, or click blank then click option'

Aset

Bappend

Cpush

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'push' or 'add' which are not valid methods.

Using 'append' for headers which may cause unexpected behavior.

Use set to set the Authorization header and append to add a search param.

5fill in blank

hard

Fill all three blanks to create headers and params with multiple values.

Angular

const headers = new HttpHeaders().[1]('Accept', 'application/json');
const params = new HttpParams().[2]('page', '2').[3]('limit', '20');

Drag options to blanks, or click blank then click option'

Aset

Bappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' twice on params which overwrites previous values.

Using invalid methods like 'push' or 'add'.

Headers use set to assign 'Accept'. Params use append twice to add 'page' and 'limit'.