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
}

Need a 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
}

Need a 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
  }
}

Need a 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;
      });
  }
}

Need a hint?

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