GET requests in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular component display after a successful GET request?

Consider this Angular standalone component that fetches user data on initialization.

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

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<div>User: {{ user?.name }}</div>`
})
export class UserComponent implements OnInit {
  user: any;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/user/1').subscribe(data => {
      this.user = data;
    });
  }
}

Assuming the GET request returns {"name": "Alice"}, what will be shown in the browser?

Angular

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

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<div>User: {{ user?.name }}</div>`
})
export class UserComponent implements OnInit {
  user: any;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/user/1').subscribe(data => {
      this.user = data;
    });
  }
}

A User: [object Object]

B User: undefined

C User: null

D User: Alice

💡 Hint

Look at how the template uses the safe navigation operator ?. and what the GET request returns.

The GET request returns an object with a name property set to "Alice". The template safely accesses user?.name, so it displays "User: Alice" once the data arrives.

📝 Syntax

intermediate

Which option correctly performs a GET request using Angular's HttpClient?

Choose the code snippet that correctly uses Angular's HttpClient to perform a GET request and subscribe to the response.

A this.http.get('url').then(response => console.log(response));

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

C this.http.get('url').subscribe(response => console.log(response));

D this.http.get('url').fetch(response => console.log(response));

💡 Hint

Remember that Angular's HttpClient returns an Observable, not a Promise.

Angular's HttpClient returns an Observable, so you use subscribe() to get the response. Options A, C, and D use invalid methods.

🔧 Debug

advanced

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

Look at this Angular service method:

getData() {
  return this.http.get('https://external-api.com/data');
}

When called, the browser console shows a CORS error. What is the most likely cause?

Angular

getData() {
  return this.http.get('https://external-api.com/data');
}

A The external API does not allow cross-origin requests from your app's domain.

B The URL is missing the HTTP protocol prefix.

C Angular HttpClient requires POST method for external APIs.

D The HttpClient module is not imported in the app module.

💡 Hint

CORS errors happen when the server blocks requests from different origins.

CORS (Cross-Origin Resource Sharing) errors occur because the external API server does not permit requests from your app's domain. This is a server-side configuration issue.

❓ state_output

advanced

What is the value of 'data' after this GET request completes?

Given this Angular component code:

data: any;

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('https://api.example.com/items').subscribe(response => {
    this.data = response;
  });
}

If the API returns [{"id":1,"name":"Item1"},{"id":2,"name":"Item2"}], what will data contain?

Angular

data: any;

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('https://api.example.com/items').subscribe(response => {
    this.data = response;
  });
}

A {"id":1,"name":"Item1"}

B [{"id":1,"name":"Item1"},{"id":2,"name":"Item2"}]

C undefined

D null

💡 Hint

The API returns an array of objects. The subscription assigns the whole response to data.

The GET request returns an array of two objects. The data variable holds the entire array after subscription.

🧠 Conceptual

expert

Which statement best explains Angular's HttpClient GET request behavior?

Choose the statement that correctly describes how Angular's HttpClient GET requests work.

A HttpClient GET returns an Observable that emits the response once and completes automatically.

B HttpClient GET returns a Promise that resolves with the response data.

C HttpClient GET returns an Observable that keeps emitting data every second until unsubscribed.

D HttpClient GET returns a synchronous response immediately without waiting.

💡 Hint

Think about how Angular handles HTTP requests and Observables.

Angular's HttpClient GET returns an Observable that emits the HTTP response once and then completes. It does not emit repeatedly or return a Promise.