How to send an http get request to Rest API server in Angular 7
In this angular 7 tutorial, we’ll learn by example how to send GET requests to REST API servers in your Angular 7 application using Httplient. We’ll also see how to use Angular services, RxJS Observables, models and the async pipe.
When we built a Front end application using javascript frameworks like Angular Js, they communicate with backend servers through RESTFUL APIs and they are based on the HTTP protocol.
Angular HttpClient uses the XMLHttpRequest, which supports by old browsers.
During this tutorial, we are going to learn with examples of how to use HttpClient for get request. HttpClient is available from the @angular/common/http package. HttpClient make HTTP GET requests using the angular get() method.
Set HttpClient in your angular application
get(url: string, options: {
headers?: HttpHeaders;
observe: ‘response’;
params?: HttpParams;
reportProgress?: boolean;
responseType?: ‘json’;
withCredentials?: boolean;
}): Observable>;
We can get the data using the get() method in two ways.
1) Subscribe to the returning Observables
2) Async pipe with the returning Observables
Subscribe to the returning Observables
Let start with an example:-
Start with importing HttpClient in your component and include HttpClient via the component’s constructor.
import { HttpClient } from '@angular/common/http';
constructor(private httpClient: HttpClient){}
Now make a function for httpclient get() method
get_posts(){
this.httpClient.get(‘https://vrsoftcoder.com/wp-json/wp/v2/posts’).subscribe((response)=>{
console.log(response);
});
}
Let show the posts on the component template. First, declare a posts array inside the class.
private posts = [];
And make the changes in get_posts() method as follows:-
get_posts(){
this.httpClient.get('https://vrsoftcoder.com/wp-json/wp/v2/posts').subscribe((response : any[])=>{
console.log(response);
this.posts = response;
});
}
Now loop the posts array using ngFor loop of angular:-
- {{item.title}}
Async pipe with the returning Observables
With Async pipe we first need to create an observable by following way:-
private postsObservable : Observable ;
Now call the get() method and commit the result to postsObservable:
this.postsObservable = this.httpClient.get('https://vrsoftcoder.com/wp-json/wp/v2/posts');
And make changes in your component template:-
- {{item.title}}
Angular Services
When we used HttpClient get() method direct in our component, it is against the separations of the coding rule and coding standard. To retain coding standard we used angular services. Now we have to recreate our code to use an Angular service. In Angular service we make HTTP GET requests then Angular service returns the result back to our component.
So let’s create a new service:-
$ ng generate service postdata
Now we have to move to get() request code to post data service. Open the src/app/postdata.service.ts and update it as follow:-
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class PostdataService {
baseUrl:string = "https://vrsoftcoder.com/wp-json/wp/v2/posts";
constructor(private httpClient : HttpClient) {}
get_posts(){
return this.httpClient.get(this.baseUrl);
}
}
Now Update the src/app/app.component.ts file as follows:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { PostsdataService } from './postdata.service';
/* .... */
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private posts = [];
private postsObservable : Observable ;
constructor(private postdataService: PostdataService){
this.postsObservable = this.postdataService.get_posts();
or
this.postdataService.get_posts().subscribe((res : any[])=>{
this.posts = res;
});
}
}
Creating Post Model
create a model named posts.ts in the root directory of your application and update as follows:-
export interface Posts {
id: number;
title: string;
slug: string;
content: string;
}
Next update your app.component.ts file as follows:-
import { Posts } from './posts';
private posts : posts[] = [];
private postsObservable : Observable ;
constructor(private postsdataService: PostsdataService){
this.postsObservable = this.postsdataService.get_posts();
this.postsdataService.get_posts().subscribe((res : posts[])=>{
this.posts = res;
});
}
How to send an http get request to Rest API server in Angular 7, http, httpclient get(), get request in angular 7, HTTP GET Requests, Services, async pipe, Observables, angular services, angular2 services, angular4 services, angular6 services, angular7 services, Observables in angular7, Observables in angular6,Observables in angular5,Observables in angular2,angular7 Observables,angular6 Observables,angular5 Observables,angular4 Observables,httpclient angular,httpclient get,httpclient api,httpclient angular 7 example,httpclient angular example,using a httpclient,httpclient example in angular 6,httpclient get example,httpclient get request,httpclient getasync,httpclient get request angular 6,observables angular,observables and promises,observables and rxjs,observables and subject,observables are lazy,is observables a word,observables example angular 5,observables example,,, http get request in angular 8,http get request in angular,http get request example in angular 8,http api call in angular,angular http get api call,angular api get request,http request and response in angular,angular http get request example