Angular 6 HTTP Get Method with Example


Today, We want to share with you Angular 6 HTTP Get Method with Example.In this post we will show you $http.get server request in Angular 6, hear for Angular 6 AJAX Call using GET Request we will give you demo and example for implement.In this post, we will learn about How To GET Data From $http Service in Angular 6 with an example.

Angular 6 HTTP Get Method with Example

There are the Following The simple About Angular 6 HTTP Get Method with Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop angular 6 http get example with parameters, so the some major files and Directory structures for this example is following below.

  • Import @angular/common/http
  • Inject HttpClient
  • via component constructor
  • create HTTP GET Requests

Angular 6 HttpClient Setting up

Config the HttpClient Get Request Module in Angular 6

//Import @angular/common/http
import { HttpClientModule } from '@angular/common/http';

//Inject HttpClient
declarations: [
//Inject HttpClient implement in angular-6
imports: [
providers: [],
//custom CSS
bootstrap: [AppComponent]
export class AppModule { }

Angular 6 HttpClient Tutorial

Angular 6 Example

Angular Latest My Previous Post With Source code

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client
Read Also:  Angular 6 AJAX Tutorial Example From Scratch

Angular 6 HTTP GET Requests using HttpClient


This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";

class Member {
    id : 121;
  name: "Jaydeep Gondaliya";
  email: "[email protected]";
  tel: 9825607458;
//Angular 6 HTTP Get Method Component
  selector: 'members',
  template: `
    <ul *ngIf="membersObservable | async as members else empty">
            <li *ngFor="let member of members">

    <ng-template #empty> No Members Yet </ng-template>
export class MemberComponent implements OnInit {
    membersObservable : Observable<Member[]>;

    constructor(private httpClient:HttpClient) {}

    ngOnInit() {
        this.membersObservable = this.httpClient

Free Live Chat for Any Issue

Angular 6 HTTP Get Method with Parameters

HTTP GET Request Parameters : HttpParams 
const myvar = new HttpParams().set('_page', "1").set('_limit', "1");

Read Also:  Vue watch two dimensional Array and Object
Angular 6 CRUD Operations Application Tutorials

Read :


You can also read about AngularJS, ASP.NET, VueJs, PHP.


I hope you get an idea about Angular 6 HTTP Get Method with Example.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Angular 6 Class Binding Tutorial with Examples

How useful was this post?

Click on a star to rate it!