Calling an API with HttpClient

Getting real data

Most apps load data from a server over the internet. Angular’s HttpClient makes these requests for you and returns the result. (HTTP just means HyperText Transfer Protocol — the everyday set of rules browsers use to ask web servers for things.)

You usually talk to a server through its API (Application Programming Interface — a way for two programs to talk to each other). Many web APIs follow a simple, popular style called REST (a common set of rules for web APIs where each web address stands for one kind of thing, like /api/tasks for tasks). A GET request is one of these calls: it simply asks the API for some data — for example a list of tasks — and the server replies with it.

The whole request in order

Before any code, here is the full back-and-forth a GET request makes, step by step. Keep this picture in mind — the code below is just these steps written out:

1. Your component asks Angular for HttpClient (Angular hands it over through the constructor).
2. You call http.get(url) with the API’s web address — this builds the request but does not send it yet.
3. You call .subscribe(...) on it. This actually sends the request over the internet to the server.
4. Angular waits while the server works — your app keeps running, nothing freezes (this is what “asynchronous” means: the answer comes later).
5. The server replies with the data (for example a list of tasks).
6. The function you passed to .subscribe(...) now runs, receiving that data.
7. You save the data on the component (here into tasks), and the template re-draws — so *ngFor shows the new list on screen.

Turn HttpClient on

First make HttpClient available by providing it when the app starts.

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]    // enable HTTP calls
});

Make a GET request

Inject HttpClient, call .get(url), and subscribe to receive the data when the server responds. The request is asynchronous — a long word that just means the answer arrives later, not on the same line.

Picture ordering food: you place the order and carry on chatting; when the meal is ready the waiter brings it to your table. .get(...) places the order, and the function you pass to .subscribe(...) is what runs when the “meal” (your data) arrives.

// tasks.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tasks',
  template: '<li *ngFor="let t of tasks">{{ t.title }}</li>'
})
export class TasksComponent {
  tasks: any[] = [];

  constructor(private http: HttpClient) {
    this.http.get('https://example.com/api/tasks')
      .subscribe(data => {
        this.tasks = data as any[];   // runs when the data arrives
      });
  }
}