How to Make GET Request in Angular: Simple Guide

In Angular, you make a GET request using the HttpClient service by calling its get() method with the URL. You must first import HttpClientModule in your app module and inject HttpClient in your component or service to use it.

Syntax

The basic syntax to make a GET request in Angular is:

• this.http.get<Type>(url): Sends a GET request to the specified URL and expects a response of type Type.
• subscribe(): Used to listen for the response asynchronously.

You need to import HttpClientModule in your app module and inject HttpClient in your component or service.

typescript

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

constructor(private http: HttpClient) { }

this.http.get<Type>('https://api.example.com/data').subscribe(response => {
  console.log(response);
});

Example

This example shows a simple Angular component that makes a GET request to fetch user data from a public API and displays it in the console.

typescript

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

@Component({
  selector: 'app-user',
  template: `<p>Check console for user data.</p>`
})
export class UserComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<any>('https://jsonplaceholder.typicode.com/users/1')
      .subscribe(user => {
        console.log('User data:', user);
      });
  }
}

Output

User data: { id: 1, name: "Leanne Graham", username: "Bret", ... }

Common Pitfalls

• Forgetting to import HttpClientModule in your app module causes errors.
• Not subscribing to the get() observable means the request won't execute.
• Not handling errors can cause your app to crash or hang silently.
• Assuming the response type without specifying or casting can lead to type errors.

Always import HttpClientModule in app.module.ts and handle errors with catchError or subscribe error callback.

typescript

/* Wrong: Missing HttpClientModule import and no subscription */
this.http.get('https://api.example.com/data');

/* Right: Import HttpClientModule and subscribe */
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
@NgModule({
  imports: [HttpClientModule]
})
export class AppModule { }

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

Quick Reference

• Import HttpClientModule in your root module.
• Inject HttpClient in your component or service.
• Use http.get<Type>(url).subscribe() to make the GET request.
• Handle errors using subscribe error callback or RxJS operators.

Key Takeaways

Always import HttpClientModule in your app module before using HttpClient.

Use HttpClient's get() method and subscribe() to make and handle GET requests.

Handle errors to avoid app crashes or silent failures.

Specify or cast the expected response type for better type safety.

Without subscribing, the GET request will not be sent.