Angular 12 HTTP get request example using HttpClient module

Every front-end application needs to communicate with third party server to get and send data to server. Angular uses HTTP protocol to send and get data with server. Angular's HttpClient module helps to communicate with server.

In this example, we will create an angular application and send a get request to 3rd party server to get data and show over html. We will go through step by step. Let's start from creating new Angular application.

Step 1: Create Angular application

In the first step, we create a new Angular application using below ng command in Terminal or command prompt.

ng new request

This will create a new Angular project in workspace. Now go to the project directory with cd command.

cd request

Step 2: Create a new interface

Now open the application into your faviourite browser and open src/app directory. All our new code files will be created in this directory. Create a new interface user.ts file and add the interface into it.

export interface User {
    userId: number,
    id: number,
    title: string,
    completed: boolean
}

We will use this interface to type cast our data.

Step 3: import HttpClientModule into app.module.ts

Open app.module.ts file and import HttpClientModule from @angular/platform-browser directory. Also add it to imports array of @NgModule decorators.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create a new service

In angular, services are the class which sends request to server and send it component. Create a new service with following ng command:

ng generate service User

This will create a user.service.ts file with UserService class which uses @Injectable decorators. Now in this service first import User interface and HttpClient module as below.

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

import { User } from './user';

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

  private requestUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(
    private http: HttpClient
  ) { }

  getUser(): Observable<User> {
    return this.http.get<User>(this.requestUrl);
  }
}

In addition, we also create requestUrl property and object of HttpClient into constructor. getUser() method will call get() method from HttpClient object to requestUrl and return the data.

Step 5: Create method in component

Now we will create a method into component. We will also create service object into constructor which will used to call service and receive data from HTTP request.

import { Component } from '@angular/core';
import { User } from './user';
import { UserService } from './user.service';

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

  user: any;

  constructor (private userService: UserService) { }

  ngOnInit(): void {
    this.getUser();
  }

  getUser(): void {
    this.userService.getUser()
      .subscribe(user => this.user = user);
  }
}

Step 6: Change HTML view

We have created user variable into component which is type of object so now we can use it into view file. So change app.component.html file as below:

<h1>User details</h1>
<p>userId: {{ user.userId }}</p>
<p>id: {{ user.id }}</p>
<p>title: {{ user.title }}</p>
<p>complete status: {{ user.completed }}</p>

Now we have completed the coding part. So it is time to check the request. In the Terminal, run the Angular server with following command:

ng serve --open

This will also open http://localhost:4200 in your default browser. The data from HTTP request will show as below:

This way, you can create and send HTTP get request to server and render data into HTML view. I hope you liked this article and it will help you in web development.