How to make a http get request in angular 8

In this angular 8 tutorial, we’ll learn by example how to send GET requests to REST API servers in your Angular 8 application using Httplient. We’ll also see how to use Angular services, RxJS Observables, models and the async pipe.

When we built a Front end application using javascript frameworks like Angular Js, they communicate with backend servers through RESTFUL APIs and they are based on the HTTP protocol.

Angular HttpClient uses the XMLHttpRequest, which supports by old browsers.

During this tutorial, we are going to learn with examples of how to use HttpClient for get() request. HttpClient is available from the @angular/common/http package. HttpClient make HTTP GET requests using the angular get() method. Let’s start by step by step:-

Import HttpClientModule in your angular 8 application

First import the http client module in your app.module.ts file.

  import { HttpClientModule } from '@angular/common/http';
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    HttpClientModule
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

Create a angular 8 services

When we used HttpClient get() method directly in our component, it is against the separations of the coding rule and coding standard. To retain coding standard we used angular services. We will create our code for http get() request using an Angular service. In Angular service we make HTTP GET requests then Angular service returns the result back to our component.

So let’s create a new service:-

$ ng generate service employeedata

Now we a file named employeedata.service.ts in our application directory. First import HttpClient module in this file.

I have created a function get_employees() to get the employees data from the rest API’s.

import { Injectable } from '@angular/core';

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

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

baseUrl:string = "http://dummy.restapiexample.com/api/v1/employees";
    constructor(private httpClient : HttpClient) {}
    get_employees(){
        return this.httpClient.get(this.baseUrl);
    }
}

Import HttpClient in your component

Next import HttpClient in your component and include HttpClient via the component’s constructor.

 import { HttpClient } from '@angular/common/http';
 constructor(private httpClient: HttpClient){}

Now make a function for httpclient get() method

For get() method, I have created a function to get the employees. See below example.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { EmployeedataService } from './employeedata.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';


   private employees  = []; 

       constructor(private employeedataService: EmployeedataService){
           
            
            this.employeedataService.get_employees().subscribe((res : any[])=>{
                this.employees = res;

                console.log(this.employees);
            });

}
}

You can check the console for result.

Now show the Employees using component template

Employee Id	Employee Name	Employee Age	Employee Salary
{{item.id}}	{{item.employee_name}}	{{item.employee_age}}	{{item.employee_salary}}

see the screenshot below for output:-

See also Angular 8 Template Driven Forms Tutorial with Examples
How to send an http get request to Rest API server in Angular 7
How to render html in node js