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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions