Angular 6 Http Client

Angular 6 Http Client

In Angular 6, HttpClient is added and it will allow us to get external data, post to it, etc. To make use of the http service we must import the http module. Let's take an example of how to allow use of the http operation.

We need to import the module in app.module.ts to start using the http service, as shown below –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

If you see the highlighted code, we imported the HttpClientModule from @angular / common / http and the same is added to the import array as well.

Let's using the http application now at app.component.ts-

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 {
   constructor(private http: HttpClient) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      subscribe((data) ⇒ console.log(data))
   }
}

Let's explain the code already illuminated. We need to import http to allow the following usage of the application –

import { HttpClient } from '@angular/common/http';

A constructor is generated in the class AppComponent, as is the private http variable of form Http. To retrieve the data, we must use the get API with http as follows-

this.http.get();

It takes the url as the parameter to be fetched as seen in the application.

To get the json data, we can use the test url − https:/jsonplaceholder.typicode.com/users.

The json objects are seen in the browser, if you can. Within the browser all the objects may be displayed.

To view the objects in the browser, upgrade the app.component.html and app.component.ts codes as follows –

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 {
   constructor(private http: HttpClient) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

In app.component.ts we will call the display data method using the subscribe method and pass the data fetched to it as the parameter.

We must store the data in a httpdata variable inside the view data process. With this httpdata variable, which is performed in the app.component.html file, the data is shown in the browser.

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

The json object is as follows −

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",
   
   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },
   
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

In app.component.ts we will call the display data method using the subscribe method and pass the data fetched to it as the parameter.

We must store the data in a httpdata variable inside the view data method. With this httpdata variable, which is performed in the app.component.html file, the data is shown in the browser.

Now let's introduce the search parameter, which is sorting based on specific data. We have to retrieve the data depending on the passed request parameter.

The changes made to app.component.html and app.component.ts files observe –

app.component.ts

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 {
   constructor(private http: HttpClient) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

We'll add the request parameter I d = this.searchparam for get api. The search-param is 2. We require the I d = 2 details from the json file.

We consoled the data that is obtained from the http in the browser. The same is seen in the console browser. In the browser the name of the json with I d = 2 is seen.