Latest Code Tutorials

Angular HTTP Request Tutorial Example


Angular HTTP Request Tutorial Example is today’s topic. Most of the front-end applications communicate with the backend services over an HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch() API.  With HttpClient@angular/common/http provides a simplified API for HTTP functionality for use with Angular applications, building on top of the XMLHttpRequest interface exposed by browsers.

If you want to learn more about Angular 7 then check out this Angular 7 – The complete Guide course.

Angular HTTP Request Tutorial

Here, I have used Angular CLI for the demonstration purpose.

Step 1: Do one Angular Project.

First, you need to install Angular CLI globally in your PC.

Then, go to the terminal and hit the following command.

ng new ngHTTPClient

So, it will create some boilerplates and also install all the NPM modules dependencies.

Step 2: Create a backend data.

If you have followed my Laravel 5.5 Angular 4 Tutorial Example From Scratch article then, in that section, I have described how to post the request data to the Laravel API server.

Now, For this example, I am using online JSON service to fetch the data from the server.

You can request the data to this URL:

Step 3: Include the HttpClient Module.

We need to include the module into the app.module.ts file.

// app.module.ts

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

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 4: Making a request for JSON data.

// app.component.ts

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
   // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('').subscribe(data => {

The above code is perfect. And you will see the console output.

But in some cases, the output will not be there because of CORS problem.

You will find an error like this.

Failed to load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access

So, in the real-time application, if you are using Laravel or Node.js as a  backend, you can find the solution by just download and install the right package for it.

If you are a Laravel developer then, you can find the solution on the above-mentioned link.

This is how you can get and post the request to any API server and get the response.

You can find more on this URL:

Finally, Our Angular HTTP Request Tutorial is over.


  1. Vinod Kumar says

    if you change the end point URL to proper json response, you won’t get the CORS error.
    with this url, I am able to get the response.

  2. John Hammond says

    Hi great article,

    Using Observable<HttpResponse> with HttpClient, is tied to HttpResponse and needs .subscibe(x =>…) to be called in the rest of your code.
    This creates a tight coupling between the http layer and the rest of your code.

    There is an Angular library (angular-extended-http-client) which allows you to use HttpClient with strongly-typed callbacks.
    With this, you only deal with your Models in the rest of your code.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.