In this article post, I am sharing one of the major
new features of Angular 4 and 5 are HttpClientModule
and HttpClient and it’s available in
package @angular/common/http.
Table of Contents –
ü HttpClientModule
ü HttpClient
ü HttpClient
GET/POST/PUT Methods
ü Example
The web applications communicate with backend
services over the HTTP protocol and the browsers support to the XMLHttpRequest interface and the fetch () API to execute HTTP request.
The new HttpClient
service is included in the HttpClientModule
and it used to initiate HTTP request
and responses in angular apps.
The HttpClient
is more modern and easy to use alternative of HTTP.
Also the HttpClient
is use the XMLHttpRequest browser
API to execute HTTP request and it specific the HTTP request type’s i.e.
ü Get()
ü Post()
ü Put()
ü Delete()
ü Patch()
ü Head()
ü Jsonp()
Setup
and install the latest version of Angular - Angular CLI
npm install -g @angular/cli@latest
Use
of HttpClient Services in App Module - [import
HttpClient module in app.module.ts]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Use
of HttpClient in your components -
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demoApp';
// Inject HttpClient into your
component or service.
constructor(private httpClient: HttpClient){ }
}
How
To Use HttpClient in Angular?
Example
– – HTTP
request for POST Method
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
//variables
baseUrl ="https://code-sample.com/";
users = null;
//injects HttpClient
into your component or service.
constructor(private http: HttpClient){ }
//Load User info.
ngOnInit(): void {
//Make the HTTP request:
this.http.get(this.baseUrl +'api/users/').subscribe(data => {
this.users = data;
},
err => {
console.log("Error-
something is wrong!")
});
}
}
Example
2 – HTTP
request for GET/POST Method
import
{ Component, OnInit
} from '@angular/core';
import
{ HttpClient } from
'@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export
class AppComponent
implements OnInit
{
baseUrl ="https://code-sample.com/";
users = null;
// Inject
HttpClient into your component or service.
constructor(private
http: HttpClient){ }
//Load User info.
ngOnInit(): void
{
// Make the HTTP request:
this.http.get(this.baseUrl
+'api/users/').subscribe(data
=> {
this.users
= data;
},
err =>
{
console.log("Error-
something is wrong!")
});
}
addUser = function(){
let user
={
id: 1,
name: 'Anil
Singh',
user_Id:9979,
site : 'https://code-sample.com'
}
//Make the HTTP Post Request
this.http.post(this.baseUrl
+'api/addUser/', user)
.subscribe(
result
=> {
console.log("The
User added successfully!");
console.log(result);
},
err
=> {
console.log("Error-
something is wrong!")
});
}
}
I hope you are enjoying with this post!
Please share with you friends!! Thank you!!!