GET requests in Angular - Mini Project: Build & Apply

GET requests

📖 Scenario: You are building a simple Angular app that fetches a list of users from a server. This app will show how to get data using HTTP GET requests.

🎯 Goal: Create an Angular standalone component that fetches user data from a public API using a GET request and displays the user names in a list.

📋 What You'll Learn

Create a standalone Angular component named UserListComponent.

Use Angular's HttpClient to make a GET request to https://jsonplaceholder.typicode.com/users.

Store the fetched users in a variable called users.

Display the user names in an unordered list (<ul>) in the component template.

Handle the GET request inside ngOnInit lifecycle hook.

💡 Why This Matters

🌍 Real World

Fetching data from servers is a common task in web apps. This project shows how to get data from an API and display it in Angular.

💼 Career

Knowing how to use Angular's HttpClient for GET requests is essential for frontend developers working with APIs.

1

Set up the users array

Create a standalone Angular component named UserListComponent with an empty array variable called users of type any[].

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: ``,
})
export class UserListComponent {
  users: any[] = [];
  // Your code here
}

Hint

Start by creating the component class and declare users as an empty array.

2

Import HttpClient and inject it

Import HttpClient and HttpClientModule from @angular/common/http. Add HttpClientModule to the component's imports array. Inject HttpClient in the constructor as private http: HttpClient.

Angular

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [HttpClientModule],
  template: ``,
})
export class UserListComponent {
  users: any[] = [];

  constructor(private http: HttpClient) {}
  // Your code here
}

Hint

Remember to import HttpClientModule and add it to imports in the component decorator. Inject HttpClient in the constructor.

3

Make the GET request in ngOnInit

Implement the ngOnInit lifecycle hook. Inside it, use this.http.get to fetch data from 'https://jsonplaceholder.typicode.com/users'. Subscribe to the observable and assign the response to the users array.

Angular

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [HttpClientModule],
  template: ``,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Your code here
  }
}

Hint

Use ngOnInit to call this.http.get and subscribe to the result. Assign the data to users.

4

Display the user names in the template

Update the component's template to display an unordered list (<ul>) of user names. Use *ngFor="let user of users" to loop over users and show each user.name inside a <li>.

Angular

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [HttpClientModule],
  template: `
    
  `,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(data => {
        this.users = data;
      });
  }
}

Hint

Use *ngFor in the template to loop over users and display each user's name inside a list item.

Practice

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

easy

A. To update existing data on the server

B. To send new data to the server

C. To delete data from the server

D. To retrieve data from a server without changing it

Solution

1. Step 1: Understand GET request purpose

   GET requests are used to ask the server to send data without modifying it.

2. Step 2: Compare with other HTTP methods

   POST sends new data, DELETE removes data, PUT/PATCH updates data, so they are not GET.

3. Final Answer:

   To retrieve data from a server without changing it -> Option D

4. Quick Check:

   GET = retrieve data [OK]

Hint: GET always fetches data without changing it [OK]

Common Mistakes:

• Confusing GET with POST or DELETE
• Thinking GET modifies server data
• Using GET to send data in the request body

2. Which of the following is the correct way to make a GET request using Angular's HttpClient?

easy

A. this.http.get('url').subscribe(data => console.log(data));

B. this.http.post('url').subscribe(data => console.log(data));

C. this.http.delete('url').subscribe(data => console.log(data));

D. this.http.put('url').subscribe(data => console.log(data));

Solution

1. Step 1: Identify HttpClient method for GET

   The method to fetch data is get() on HttpClient.

2. Step 2: Check syntax with subscribe

   Using subscribe handles the asynchronous response correctly.

3. Final Answer:

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

4. Quick Check:

   HttpClient.get() + subscribe = correct GET syntax [OK]

Hint: Use http.get() with subscribe to fetch data [OK]

Common Mistakes:

• Using post(), delete(), or put() instead of get()
• Forgetting to subscribe to the observable
• Calling get() without parentheses

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

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

medium

A. The data received from the API endpoint

B. An error message because subscribe is missing

C. Nothing, because get() does not return data

D. A syntax error due to wrong method usage

Solution

1. Step 1: Understand HttpClient.get() behavior

   The get() method returns an observable that emits the data from the API.

2. Step 2: Effect of subscribe()

   Calling subscribe() listens to the observable and runs the callback with the data, logging it.

3. Final Answer:

   The data received from the API endpoint -> Option A

4. Quick Check:

   subscribe logs API data [OK]

Hint: subscribe callback logs the fetched data [OK]

Common Mistakes:

• Assuming get() returns data directly without subscribe
• Thinking subscribe is optional
• Confusing observable with promise

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

this.http.get('https://api.example.com/data').subscribe(data => this.data = data);

Assuming this.http is properly injected and data is a class property.

medium

A. GET request URL is invalid

B. HttpClient is not imported

C. Missing error handling in subscribe

D. subscribe callback uses wrong arrow function syntax

Solution

1. Step 1: Check syntax and usage

   The get() call and subscribe syntax are correct, and this.http is assumed injected.

2. Step 2: Identify missing best practice

   No error handling is provided in subscribe, which can cause silent failures.

3. Final Answer:

   Missing error handling in subscribe -> Option C

4. Quick Check:

   Always add error handling in subscribe [OK]

Hint: Always handle errors in subscribe to catch failures [OK]

Common Mistakes:

• Ignoring error callback in subscribe
• Assuming URL is invalid without checking
• Confusing arrow function syntax

5. You want to load a list of users from an API and display them in your Angular component. Which approach correctly combines GET request and updating the component's state?

hard

A. Call this.http.post('api/users').subscribe(users => this.users = users); in constructor

B. Use this.http.get('api/users').subscribe(users => this.users = users); in ngOnInit

C. Assign this.users = this.http.get('api/users'); directly without subscribe

D. Use this.http.delete('api/users').subscribe(users => this.users = users); in ngOnInit

Solution

1. Step 1: Choose correct HTTP method and lifecycle hook

   GET is used to fetch data; ngOnInit is the right place to load data after component creation.

2. Step 2: Use subscribe to update component state

   Subscribe receives data asynchronously and assigns it to this.users for display.

3. Final Answer:

   Use this.http.get('api/users').subscribe(users => this.users = users); in ngOnInit -> Option B

4. Quick Check:

   GET + subscribe + ngOnInit = correct pattern [OK]

Hint: Load data in ngOnInit with http.get() and subscribe [OK]

Common Mistakes:

• Using POST or DELETE instead of GET
• Assigning observable directly without subscribe
• Loading data in constructor instead of ngOnInit