HttpClient

What's New in HttpClient and HttpClientModule in Angular 4/5?

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.

ü  Stayed Informed - Angular 4 and Angular 5 Tutorials

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!!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

What's New in HttpClient and HttpClientModule in Angular 4/5? What's New in HttpClient and HttpClientModule in Angular 4/5? Reviewed by Anil Singh on 11:14 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^