Angular’s 17 HttpClient Complete Tutorial – DEV Community

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

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

// app.module.ts
import { NgModule } from '@angular/core';
import { provideHttpClient } from 'somewhere';

@NgModule({
  providers: [
    provideHttpClient(),
  ],
  // ... other application configuration
})
export class AppModule {}

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {
    // This service can now make HTTP requests via `this.http`.
  }
}

// app.config.ts
import { provideHttpClient, withFetch } from 'somewhere';

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

// We use HttpClient to make a GET request to a server endpoint.
this.http.get('/api/products').subscribe({
  next: products => {
    // Once we get the products, we can display them to the user.
    console.log(products);
  }
});

// We use HttpClient to make a GET request for an image.
this.http.get('/images/cat.jpg', { responseType: 'blob' }).subscribe({
  next: image => {
    // Once we get the image, we can display it to the user.
    console.log(image);
  }
});

// We use HttpClient to make a POST request to add a new product.
this.http.post('/api/products', newProduct).subscribe({
  next: response => {
    // Once the product is added, we can do something with the response.
    console.log(response);
  }
});

// We use HttpClient to make a POST request to add a new product.
http.post('/api/products', newProduct).subscribe({
  next: response => {
    console.log('Product added successfully:', response);
  },
  error: err => {
    console.error('Failed to add product:', err);
    // We can show an error message to the user or retry the request.
  }
});

ng new http-client-demo

ng generate service data

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

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

  private apiUrl="https://jsonplaceholder.typicode.com";

  constructor(private http: HttpClient) { }

  // Method to fetch JSON data
  getJsonData(): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/posts`).pipe(
      catchError(error => {
        console.error('Error fetching JSON data:', error);
        return throwError(()=> new Error('Something went wrong; please try again later.'));
      })
    );
  }

  // Method to fetch an image
  getImage(): Observable<Blob> {
    return this.http.get(`${this.apiUrl}/photos/1`, { responseType: 'blob' }).pipe(
      catchError(error => {
        console.error('Error fetching image:', error);
        return throwError(()=> new Error('Unable to fetch image.'));
      })
    );
  }

  // Method to simulate adding a new post
  addPost(newPost: any): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/posts`, newPost).pipe(
      catchError(error => {
        console.error('Error adding post:', error);
        return throwError(()=> new Error('Failed to add post.'));
      })
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service'; 

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    // Fetch JSON data
    this.dataService.getJsonData().subscribe({
      next: data => {
        console.log('JSON Data:', data)
      },
      error: error => {
        console.error('Error fetching JSON data:', error)
      }
  });

    // Fetch image
    this.dataService.getImage().subscribe({
      next: image => {
        const reader = new FileReader();
        reader.onload = () => {
          console.log('Image:', reader.result);
        };
        reader.readAsDataURL(image);
      },
      error: error => {
        console.error('Error fetching image:', error)
      }
  });

    // Add a new post
    const newPost = {
      title: 'New Post',
      body: 'Description of the new post'
    };
    this.dataService.addPost(newPost).subscribe({
      next: response => {
        console.log('Post added successfully:', response)
      },
      error: error => {
        console.error('Error adding post:', error)
      }
  });
  }
}

<div style="text-align:center">
  <h1>
    Welcome to HttpClient Demo!
  </h1>
</div>

ng serve