GET requests in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HttpClient module needed for GET requests.

Angular

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [[1]]
})
export class AppModule {}

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

AHttpGetModule

BHttpModule

CHttpClientModule

DHttpRequestModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpModule which is deprecated.

Trying to import a non-existing module like HttpGetModule.

You need to import HttpClientModule to use Angular's HTTP client for GET requests.

2fill in blank

medium

Complete the code to inject HttpClient into the constructor for making GET requests.

Angular

import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private [1]: HttpClient) {}
}

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

AhttpClient

BHttpClient

Chttp

Dclient

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name HttpClient as the variable name (uppercase).

Using unrelated names like 'client' without context.

The variable name for the injected HttpClient is usually httpClient or similar. It must be a valid identifier.

3fill in blank

hard

Fix the error in the GET request method to correctly call HttpClient's get function.

Angular

getData() {
  return this.httpClient.[1]('https://api.example.com/data');
}

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

Arequest

Bfetch

Cpost

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' instead of 'get'.

Using 'post' which is for sending data, not retrieving.

The correct method to make a GET request with HttpClient is get.

4fill in blank

hard

Fill both blanks to subscribe to the GET request and log the response.

Angular

this.httpClient.get('https://api.example.com/data').[1](response => {
  console.[2](response);
});

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

Asubscribe

Blog

Cerror

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'then' which is for Promises, not Observables.

Using 'console.error' instead of 'console.log' for normal output.

Use subscribe to listen to the Observable returned by get, and console.log to print the response.

5fill in blank

hard

Fill all three blanks to create a GET request with typed response and handle errors.

Angular

this.httpClient.get<[1]>('https://api.example.com/data').subscribe({
  next: data => this.data = data,
  error: err => this.[2] = err.message,
  complete: () => console.[3]('Request complete')
});

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

ADataType

BerrorMessage

Clog

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent type like 'DataType' without defining it.

Trying to use 'console.error' for completion message.

Use any as a generic type if no specific type is defined. Store error message in errorMessage and log completion with console.log.