python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
How To use HttpClientModule in Angular 4+?

How To use HttpClientModule in Angular 4+?

The Web applications communicate with backend services over the HTTP/HTTPS 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 -  HttpClientModule vs. HttpClient

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()

HttpClientModule – NgModule which provides the HttpClient and associated with components services and the interceptors can be added to the chain behind HttpClient by binding them to the multi provider for HTTP_INTERCEPTORS.

The HttpClientModule imported form -
import { HttpClientModule } from '@angular/common/http';



Example for the get () and post () method on HttpClient –
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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