POST requests in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular HTTP client module.

Angular

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

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

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

AHttpModule

BHttpClient

CHttpClientService

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpClient instead of HttpClientModule in imports.

Trying to import HttpModule which is deprecated.

You need to import HttpClientModule in your Angular module to use HTTP services.

2fill in blank

medium

Complete the code to inject HttpClient into the constructor.

Angular

constructor(private [1]: HttpClient) {}

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

Ahttp

BHttpClient

ChttpClient

DHttp

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase names for injected variables.

Using the class name instead of a variable name.

The injected variable name should be a lowercase descriptive name like http.

3fill in blank

hard

Fix the error in the POST request method call.

Angular

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

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

Aget

Bdelete

Cpost

Dput

Attempts:

3 left

💡 Hint

Common Mistakes

Using get instead of post for sending data.

Using put or delete which have different purposes.

To send data to the server, use the post method of HttpClient.

4fill in blank

hard

Fill both blanks to add headers and handle the POST request.

Angular

const headers = new HttpHeaders().set('[1]', '[2]');
this.http.post('https://api.example.com/data', payload, { headers }).subscribe();

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

AContent-Type

BAuthorization

Capplication/json

DBearer token123

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing authorization header with content type.

Using wrong header values.

Set the Content-Type header to application/json to tell the server the data format.

5fill in blank

hard

Fill all three blanks to create a POST request with typed response and error handling.

Angular

this.http.post<[1]>('https://api.example.com/data', payload).subscribe({
  next: (data) => console.log(data.[2]),
  error: (err) => console.error('Error:', [3])
});

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

AUser

Bname

Cerr.message

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Not specifying the generic type.

Accessing wrong property names.

Logging the whole error object instead of the message.

Specify the expected response type User, access the name property, and log the error message.