Home >  Programming Blog >  Angular

Angular REST API and HttpClient Tutorial with Example

by Didin J. on Jun 01, 2025 Angular REST API and HttpClient Tutorial with Example

Learn how to use Angular 20 standalone components with HttpClient, HttpHeaders, and HttpParams to build a simple REST API client using basic HTML

Table of Contents:

In this tutorial, you will learn how to build an Angular 20 app that interacts with a REST API using HttpClient. We'll cover how to get, post, update, and delete data through a service, and bind that data in a component using basic HTML.

Prerequisites

  • Node.js (v18 or later recommended)

  • Angular CLI v20+

  • Basic knowledge of Angular

In your terminal or CMD, type this:

sudo npm uninstall -g @angular/cli
sudo npm install -g @angular/cli@20


Step 1: Create a New Angular Project

We will start this tutorial by creating an Angular app using Angular CLI.

ng new angular-rest-api-example
cd angular-rest-api-example

Leave everything as default except choose SCSS for styling. Run the Angular app for the first time.

ng serve --open

Using those "--open" parameters will automatically open Angular in your default web browser. Here's what the Angular default page looks like.

Angular REST API HttpClient - Angular Home


Step 2: Add HttpClientModule and FormsModule

Open src/app/app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
  ]
};


Step 3: Create REST API Service

Generate a service named rest-api:

ng generate service services/rest-api.service

Then, open src/app/services/rest-api.service.ts and update it:

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

@Injectable({
  providedIn: 'root'
})
export class RestApiService {

  private apiURL = 'http://localhost:3000/api/products';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<any> {
    return this.http.get(this.apiURL);
  }

  getProduct(id: string): Observable<any> {
    return this.http.get(`${this.apiURL}/${id}`);
  }

  addProduct(product: any): Observable<any> {
    return this.http.post(this.apiURL, product);
  }

  updateProduct(id: string, product: any): Observable<any> {
    return this.http.put(`${this.apiURL}/${id}`, product);
  }

  deleteProduct(id: string): Observable<any> {
    return this.http.delete(`${this.apiURL}/${id}`);
  }
}


Step 4: Create a Standalone App Component

Update src/app/app.ts:

import { Component, OnInit } from '@angular/core';
import { RestApiService } from './services/rest-api.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [CommonModule, FormsModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App implements OnInit {
  products: any[] = [];
  product = { name: '', price: 0 };
  selectedProductId: string | null = null;

  constructor(private api: RestApiService) { }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.api.getProducts().subscribe(data => {
      this.products = data;
    });
  }

  saveProduct() {
    if (this.selectedProductId) {
      this.api.updateProduct(this.selectedProductId, this.product).subscribe(() => {
        this.resetForm();
        this.loadProducts();
      });
    } else {
      this.api.addProduct(this.product).subscribe(() => {
        this.resetForm();
        this.loadProducts();
      });
    }
  }

  editProduct(product: any) {
    this.product = { name: product.name, price: product.price };
    this.selectedProductId = product._id;
  }

  deleteProduct(id: string) {
    this.api.deleteProduct(id).subscribe(() => {
      this.loadProducts();
    });
  }

  resetForm() {
    this.product = { name: '', price: 0 };
    this.selectedProductId = null;
  }
}


Step 5: Create app.html

Update src/app/app.html:

<h2>Angular 20 REST API Example (Standalone)</h2>

<form (ngSubmit)="saveProduct()">
  <input [(ngModel)]="product.name" name="name" placeholder="Product Name" required />
  <input [(ngModel)]="product.price" name="price" type="number" placeholder="Price" required />
  <button type="submit">{{ selectedProductId ? 'Update' : 'Add' }}</button>
  <button type="button" (click)="resetForm()">Cancel</button>
</form>

<ul>
  <li *ngFor="let p of products">
    {{ p.name }} - {{ p.price | currency }}
    <button (click)="editProduct(p)">Edit</button>
    <button (click)="deleteProduct(p._id)">Delete</button>
  </li>
</ul>


Step 6: Using HTTP Headers with Angular HttpClient

Angular’s HttpClient makes it easy to set custom HTTP headers, which are useful for sending tokens, content types, or any custom metadata to the backend.

Importing and Using HttpHeaders

In your rest-api.service.ts import the HttpHeaders class:

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

Example: Add Custom Header for All Requests

You can define headers globally or per request. Here’s how to attach a custom header (e.g., an API key or token):

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-goes-here'
  })
};

You can use it like this inside a method:

getProducts(): Observable<any> {
  const headers = new HttpHeaders({
    'Custom-Header': 'MyHeaderValue'
  });

  return this.http.get(this.apiURL, { headers });
}

Example: Sending Headers with a POST Request

Update the addProduct() Method to send headers:

addProduct(product: any): Observable<any> {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-goes-here'
  });

  return this.http.post(this.apiURL, product, { headers });
}

📝 Note: For real-world APIs, the token (Bearer ...) is usually stored in localStorage or a service and injected dynamically.

Use Case: Add Auth Header Automatically

For apps requiring authentication, it’s common to write an AuthInterceptor to attach the token to every outgoing request automatically. But if you want to keep things basic in this example, manually setting HttpHeaders Like above, it works fine.


Step 7: Using HttpParams in Angular HttpClient

When working with REST APIs, you often need to send query parameters, such as filtering products by category or paginating results. Angular’s HttpParams makes it easy to construct these parameters cleanly.

Import and Use HttpParams

In your rest-api.service.ts:

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

Example: Send Search Parameters

Let’s add a method to search products by name:

searchProducts(name: string): Observable<any> {
  const params = new HttpParams().set('name', name);
  return this.http.get(this.apiURL, { params });
}

This sends a request like:

GET http://localhost:3000/api/products?name=shoes

Add Multiple Query Parameters

You can chain .set() for multiple values, or use .append():

const params = new HttpParams()
  .set('category', 'electronics')
  .set('limit', '10');

Optional: Integrate with Component

In app.ts Add a search box and call searchProducts():

searchQuery = '';

search() {
  this.api.searchProducts(this.searchQuery).subscribe(data => {
    this.products = data;
  });
}

Update your HTML to include a search field:

<input [(ngModel)]="searchQuery" placeholder="Search..." />
<button (click)="search()">Search</button>

Summary

  • HttpParams are used to build query strings for GET requests.

  • Use .set() to build key-value pairs.

  • Combine with Angular HttpClient.get() to fetch filtered or paginated data.


Conclusion

In this tutorial, you've learned how to build a modern Angular 20 application using:

  • ✅ Standalone components (no AppModule required)

  • 🔄 HttpClient to perform CRUD operations with a RESTful backend

  • 🛡️ HttpHeaders to send custom headers (e.g., Authorization, Content-Type)

  • 🔍 HttpParams to pass query parameters for search and filtering

  • 🎯 A clean and minimal UI built with just basic HTML and ngModel binding

By combining Angular's modern architecture with REST APIs, you can now build powerful, modular, and scalable front-end applications with ease. Whether you're creating an admin dashboard, an inventory manager, or a real-time data viewer, these concepts are foundational for full-stack web development with Angular.

You can get the full source code from our GitHub.

If you don’t want to waste your time designing your front-end or your budget to spend by hiring a web designer, then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That's just the basics. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

Thanks!

Related Articles

Programming Blog
JavaJavascriptHTML 5 TutorialCSS 3MongoDBIonic FrameworkGroovy and GrailsNode.jsReact NativeASP.NET CoreAngularVue.jsReact.jsFlutter TutorialMiscellaneousRustGolang (Go)
All Articles
Zizo Wireless