Make HTTP requests in Angular?

In Angular, making HTTP requests involves communicating with a server to fetch or send data over the internet. It’s like asking for information from a website or sending information to it. Angular provides a built-in module called HttpClientModule, which simplifies the process of making HTTP requests.

With this module, you can easily fetch data from a server, send data to a server, and handle responses. These requests are commonly used to interact with APIs (Application Programming Interfaces) to get or update data in web applications.

Steps to Make HTTP requests in Angular

Step 1: Create a new Angular project

ng new my-angular-app

Step 2: Navigate to the project directory

cd my-angular-app

Step 3: Serve the application

ng serve

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
}

Approach 1: Using HttpClient Module

Angular provides a built-in HttpClientModule that offers a simplified API for HTTP requests. This module is part of @angular/common/http package. You can import HttpClientModule in your Angular application’s root module (AppModule) and then inject HttpClient service where you need to make HTTP requests. It supports various HTTP methods such as GET, POST, PUT, DELETE, etc.

Example : HTTP request using HttpClient Module

HTML

<!-- app.component.html -->

<div class="container" *ngIf="(data$ | async) as data">
    <h1>GeeksforGeeks</h1>
    <div class="user-container" *ngFor="let user of data.users">
        <div class="user-card">
            <img [src]="user.image" alt="User Image">
            <p>Name: {{ user.firstName }} {{ user.lastName }}</p>
            <p>Age: {{ user.age }}</p>
            <p>Email: {{ user.email }}</p>
            <p>Phone: {{ user.phone }}</p>
        </div>
    </div>
</div>

CSS

/* App.component.css */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.user-container {
    margin: 20px;
}

.user-card {
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
}

JavaScript

//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

JavaScript

//app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    data$: Observable<any>;

    constructor(private http: HttpClient) {
        this.data$ = this.http.get('https://dummyjson.com/users');
    }
}

Output:

Approach 2: UsingThird-party Libraries

You can use third-party libraries like axios, fetch, or rxjs/ajax for making HTTP requests in Angular. For example, you can use the axios library by installing it via npm and then using it in your Angular project.

Example : In this example, we’ll use third party libraries like axios for request

HTML

<!-- app.component.html -->

<div class="container" *ngIf="quotes">
    <h1>Quotes from Server</h1>
    <div class="quote-container" *ngFor="let quote of quotes">
        <div class="quote-card">
            <p>{{ quote.quote }}</p>
            <p>- {{ quote.author }}</p>
        </div>
    </div>
</div>

CSS

/* App.component.css */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quote-container {
    margin: 20px;
}

.quote-card {
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
}

JavaScript

// app.component.ts

import { Component, OnInit } from '@angular/core';
import axios from 'axios';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    quotes: { id: number; quote: string; author: string }[] = [];

    ngOnInit() {
        this.getQuotesFromServer();
    }

    async getQuotesFromServer() {
        try {
            const response = await axios.get('https://dummyjson.com/quotes');
            this.quotes = response.data.quotes;
        } catch (error) {
            console.error('Error fetching quotes:', error);
        }
    }
}

JavaScript

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output: