Why HttpClient is needed in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import HttpClientModule in an Angular module.

Angular

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

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

AHttpModule

BHttpClient

CHttpService

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClient instead of HttpClientModule

Using deprecated HttpModule

You need to import HttpClientModule to use HttpClient services in Angular.

2fill in blank

medium

Complete the code to inject HttpClient in a service constructor.

Angular

constructor(private [1]: HttpClient) {}

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

AhttpClient

Bhttp

ChttpService

Dclient

Attempts:

3 left

💡 Hint

Common Mistakes

Using names that are too long or unclear

Using names that conflict with other variables

The common and simple variable name used is http for HttpClient injection.

3fill in blank

hard

Fix the error in the HTTP GET request code.

Angular

this.http.[1]('https://api.example.com/data').subscribe(data => console.log(data));

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

Aget

Brequest

Cfetch

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' for GET requests

Using 'fetch' which is not a HttpClient method

Use get method to make a GET HTTP request with HttpClient.

4fill in blank

hard

Fill both blanks to create a typed HTTP GET request and handle the response.

Angular

this.http.get<[1]>('url').subscribe(([2]) => console.log([2]));

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

AUser

Bresponse

Cdata

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' instead of a specific type

Using inconsistent variable names

Specify the expected data type User and use a variable like data to receive the response.

5fill in blank

hard

Fill all three blanks to add error handling to an HTTP GET request.

Angular

this.http.get('url').subscribe({ next: ([1]) => console.log([1]), error: ([2]) => console.error([2]), complete: () => console.log('[3]') });

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

Adata

Berr

CRequest complete

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable names between success and error

Not providing a completion message

Use data for success, err for errors, and a message like 'Request complete' on completion.