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:  how to redirect from one page to another in html on button click?

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

Angular 6 HTTP Get Method with Parameters

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

Read Also:  laravel flash message Notification in Blade template
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.