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.
