Angular 18 REST API By Example with HttpClient

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post we will going to do Angular 18 REST API By Example with HttpClient.

Guy’s Angular 18 came and if you are new in Angular 18 then please check below links:

1. Angular 18 Tutorials
2. Angular Free Templates

Guys story behind on this post:

Guys I was doing a demo project with demo json data. I needed to call that data using services and here is my service file:

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

interface Product {
    id: number;
    image: string;
    title: string;
    description: string;
    regularPrice: number;
    salePrice: number;
    addedDate: string;
}

@Injectable({
    providedIn: 'root'
})
export class ProductService {
    private dataUrl = 'assets/products.json'; // Path to your JSON file

    constructor(private http: HttpClient) {}

    getProducts(): Observable<Product[]> {
        return this.http.get<Product[]>(this.dataUrl);
    }
}

Guys when I call this service file into my component.ts file then I get error and I get worry but I solve that added (provideHttpClient) below code into my src/app/app.config.ts file:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

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

Here is my excursions.component.ts file:

import { Component } from '@angular/core';
import { ProductService } from '../product.service';
import { CommonModule } from '@angular/common';
interface Product {
  id: number;
  image: string;
  title: string;
  description: string;
  regularPrice: number;
  salePrice: number;
  addedDate: string;
}
@Component({
  selector: 'app-excursions',
  standalone: true,
  imports: [CommonModule],
  providers: [ProductService], // Provide the service if not provided in root
  templateUrl: './excursions.component.html',
  styleUrl: './excursions.component.css'
})
export class ExcursionsComponent {
  products: Product[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getProducts().subscribe((data) => {
      this.products = data;
    });
  }


}

And then I get all data happily into my excursions.component.html file.

So main thing is in Angular version 18 or above we need to import provideHttpClient into our src/app/app.config.ts file to call the api data.

This is it guys and if you will have any kind of query then feel free to comment below.

Jassa

Thanks