POST requests in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Angular POST request is triggered?

Consider this Angular service method that sends a POST request. What will be the output in the console when the method sendData() is called?

Angular

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

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  sendData() {
    this.http.post('https://api.example.com/data', { name: 'Alice' })
      .subscribe({
        next: (response) => console.log('Success:', response),
        error: (err) => console.log('Error:', err)
      });
  }
}

A Logs 'Success:' followed by the server response object if the POST succeeds.

B Logs 'Error:' followed by an error object even if the POST succeeds.

C Throws a compile-time error because HttpClient.post requires a third argument.

D Does nothing because subscribe is missing a complete callback.

💡 Hint

Think about what subscribe does and how Angular handles HTTP POST requests.

The subscribe method listens for the response. If the POST request is successful, the next callback runs, logging 'Success:' and the response. The error callback only runs if the request fails.

📝 Syntax

intermediate

Which option correctly sends a POST request with JSON body in Angular?

Which code snippet correctly sends a POST request with a JSON body using Angular's HttpClient?

A this.http.post('https://api.example.com/items', { id: 1, name: 'Book' }, { headers: { 'Content-Type': 'application/json' } });

B this.http.post('https://api.example.com/items', { id: 1, name: 'Book' });

C this.http.post('https://api.example.com/items', JSON.stringify({ id: 1, name: 'Book' }));

D this.http.post('https://api.example.com/items', { id: 1, name: 'Book' }, 'application/json');

💡 Hint

Angular HttpClient automatically serializes objects to JSON. Setting headers explicitly can be necessary.

Option A correctly passes the body as an object and sets the content type header. Option A is missing headers but often works due to defaults. Option A sends a string which Angular does not expect. Option A passes a string instead of an options object, causing an error.

🔧 Debug

advanced

Why does this Angular POST request fail with a CORS error?

This Angular POST request to an external API fails with a CORS error in the browser. What is the most likely cause?

this.http.post('https://external-api.com/data', { key: 'value' })
  .subscribe(response => console.log(response));

A The POST body must be sent as a query string for CORS to work.

B The server at 'https://external-api.com' does not allow cross-origin POST requests from your app's domain.

C Angular HttpClient requires a special flag to enable cross-origin requests.

D The browser blocks all POST requests by default unless using HTTPS.

💡 Hint

Think about browser security and how servers control cross-origin requests.

CORS errors happen when the server does not send the right headers to allow requests from your app's origin. Angular or the browser cannot override this. The server must be configured to allow cross-origin POST requests.

❓ state_output

advanced

What is the value of responseData after this POST request completes?

Given this Angular component code, what will be the value of responseData after submit() is called and the POST request succeeds?

Angular

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

@Component({
  selector: 'app-post-example',
  template: `<button (click)="submit()">Send</button>`
})
export class PostExampleComponent {
  responseData: any = null;

  constructor(private http: HttpClient) {}

  submit() {
    this.http.post('https://api.example.com/submit', { data: 123 })
      .subscribe(response => {
        this.responseData = response;
      });
  }
}

A The code throws an error because <code>responseData</code> is not initialized.

B <code>responseData</code> remains null because POST requests do not return data.

C <code>responseData</code> will be a string containing the request body sent.

D The <code>responseData</code> will hold the server's JSON response object after the POST succeeds.

💡 Hint

Consider what the subscribe callback receives from HttpClient POST.

HttpClient POST returns an Observable of the server response. When subscribed, the response is passed to the callback and assigned to responseData. It is not null or a string of the request body.

🧠 Conceptual

expert

Which statement best describes Angular HttpClient POST behavior with Observables?

Choose the statement that best explains how Angular's HttpClient POST method works with Observables.

A HttpClient POST sends the HTTP request synchronously and blocks the UI thread until the response arrives.

B HttpClient POST returns a hot Observable that immediately sends the HTTP request upon method call, regardless of subscriptions.

C HttpClient POST returns a cold Observable that only sends the HTTP request when subscribed to, allowing multiple subscriptions to trigger multiple requests.

D HttpClient POST returns a Promise that resolves with the server response once the request completes.

💡 Hint

Think about when Angular sends the HTTP request and how Observables behave.

Angular HttpClient POST returns a cold Observable. This means the HTTP request is not sent until you subscribe. Each subscription triggers a new HTTP request. It is not a hot Observable or a Promise, and it does not block the UI.

Practice

1. What is the main purpose of a POST request in Angular's HttpClient?

easy

A. To retrieve data from the server

B. To send data from the app to the server

C. To update the URL in the browser

D. To delete data on the server

Solution

1. Step 1: Understand HTTP methods

   POST requests are used to send data to a server, unlike GET which retrieves data.

2. Step 2: Relate to Angular HttpClient

   Angular's HttpClient.post() method sends data to the server endpoint.

3. Final Answer:

   To send data from the app to the server -> Option B

4. Quick Check:

   POST = send data [OK]

Hint: POST means sending data to server, not fetching [OK]

Common Mistakes:

• Confusing POST with GET method
• Thinking POST updates browser URL
• Assuming POST deletes data

2. Which of the following is the correct syntax to send a POST request using Angular's HttpClient?

easy

A. this.http.post('url', data).subscribe(response => console.log(response));

B. this.http.get('url', data).subscribe(response => console.log(response));

C. this.http.post('url').subscribe(data);

D. this.http.send('url', data).subscribe(response => console.log(response));

Solution

1. Step 1: Identify correct HttpClient method

   HttpClient.post() requires a URL and data object as parameters.

2. Step 2: Check subscription syntax

   subscribe() is used to handle the response asynchronously.

3. Final Answer:

   this.http.post('url', data).subscribe(response => console.log(response)); -> Option A

4. Quick Check:

   post(url, data) + subscribe() = correct syntax [OK]

Hint: Use post(url, data).subscribe() to send POST requests [OK]

Common Mistakes:

• Using get() instead of post()
• Omitting data parameter in post()
• Using non-existent send() method

3. What will be logged to the console when this Angular code runs?

this.http.post('https://api.example.com/items', {name: 'Book'}).subscribe(response => console.log(response));

medium

A. The URL string 'https://api.example.com/items'

B. An error because POST requests need no data

C. The server's response object after adding the item

D. Nothing, because subscribe() is missing

Solution

1. Step 1: Understand HttpClient.post behavior

   It sends data and waits for the server's response asynchronously.

2. Step 2: Analyze subscribe callback

   The response from the server is passed to the callback and logged.

3. Final Answer:

   The server's response object after adding the item -> Option C

4. Quick Check:

   subscribe logs server response [OK]

Hint: subscribe() logs server response from POST [OK]

Common Mistakes:

• Thinking POST requests don't need data
• Forgetting subscribe() to handle response
• Expecting URL string to be logged

4. Identify the error in this Angular POST request code:

this.http.post('https://api.example.com/data').subscribe(response => console.log(response));

medium

A. URL string is invalid

B. subscribe() method is not called correctly

C. HttpClient does not support POST requests

D. Missing data object as second argument in post()

Solution

1. Step 1: Check HttpClient.post parameters

   post() requires at least two arguments: URL and data to send.

2. Step 2: Identify missing data argument

   The code only provides URL, missing the data object to post.

3. Final Answer:

   Missing data object as second argument in post() -> Option D

4. Quick Check:

   post() needs URL and data [OK]

Hint: Always provide data object as second argument in post() [OK]

Common Mistakes:

• Omitting data argument in post()
• Misusing subscribe() syntax
• Assuming URL alone is enough

5. You want to send a POST request to add a new user with name and email, then update a message on success. Which Angular code snippet correctly does this?

hard

A. this.http.post('/api/users', {name: userName, email: userEmail}).subscribe(() => this.message = 'User added');

B. this.http.post('/api/users', userName, userEmail).subscribe(response => this.message = response);

C. this.http.post('/api/users').subscribe(response => this.message = 'User added');

D. this.http.get('/api/users', {name: userName, email: userEmail}).subscribe(() => this.message = 'User added');

Solution

1. Step 1: Verify POST request parameters

   POST requires URL and a single data object containing user info.

2. Step 2: Check subscribe callback updates message

   On success, the callback sets the message string correctly.

3. Final Answer:

   this.http.post('/api/users', {name: userName, email: userEmail}).subscribe(() => this.message = 'User added'); -> Option A

4. Quick Check:

   post(url, data).subscribe(() => update message) [OK]

Hint: POST needs data object; subscribe updates UI on success [OK]

Common Mistakes:

• Passing multiple arguments instead of one data object
• Using GET instead of POST for sending data
• Not updating message inside subscribe callback