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

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