Angular 6 HTTPClient GET Request Example

AngularJS Technology

Today, We want to share with you Angular 6 HTTPClient GET Request Example.In this post we will show you Angular 6 HttpClient Tutorial, hear for The new Angular HttpClient API we will give you demo and example for implement.In this post, we will learn about httprequest – Http post and get request in angular 6 with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Angular 6 HTTPClient GET Request Example

There are the Following The simple About Angular 6 HTTPClient GET Request Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 HttpClient Get and Post request, so the some major files and Directory structures for this example is following below.

  • Angular 6 project structre
  • Install Angular 6 project.
  • Make JSON server
  • Setup HttpClient in Angular 6
  • Create Model in Angular 6
  • Make Angular 6 service it communication To Server side

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  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

Step 1: Install Angular 6 project.

simple installed Programming Angular CLI globally on your computer machine

npm install -g @angular/cli

Step 2 : Make Angular 6 Project

Make local project using this command

ng new ng6http

//run angular 6 project
ng serve --open

Step 3: Make a JSON server.

yarn global add json-server

npm install -g json-server

db.json
{
    "comapnies": [
    {
        "id": "1",
        "name": "As a PHP devloper",
        "devloper": "Gondaliya Jaydeep"
    },
    {
        "id": "2",
        "name": "As a Laravel devloper",
        "devloper": "Dhaval Dave"
    },
    {
        "id": "3",
        "name": "As a ASP.NET devloper",
        "devloper": "Krunal Sisodiya"
    },
    {
        "id": "4",
        "name": "As UI UX Designer",
        "devloper": "Chirag Dethariya"
    },
    {
        "id": "5",
        "name": "As a C# MVC devloper",
        "devloper": "Kathiriya Ankit s"
    }]
}

http://localhost:4000/comapnies

start or run a JSON server programe that serves this data

json-server --watch src/data/db.json --port 4000

Step 4: Setup HttpClient.

app.module.ts

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

imports: [
    BrowserModule,
    HttpClientModule
  ],

Step 5: Define our Company.ts model.

//// Company.ts

export interface Company {
    id: Number;
    name: String;
    devloper: String;
}

Step 6: Create an Angular 6 service.

ng g s company --spec false

app.module.ts file.
// app.module.ts

import { CompanyService } from './company.service';

providers: [CompanyService],

Angular 6 http get example

Simple Angular 6 HTTPClient GET Request service files.

company.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class CompanyService {

  url = 'http://localhost:4000';
  constructor(private http: HttpClient) { }

  getCompanys() {
    return this
            .http
            .get(`${this.url}/comapnies`);
        }
}

Angular 6 http get example

Step 7: Make a GTML table that Listing the data.

// app.component.ts

import { Component , OnInit} from '@angular/core';
import { CompanyService } from './company.service';
import { Company } from './Company';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  comapnies: Company[];

  constructor(private companyService: CompanyService) { }

  ngOnInit() {
    this
      .companyService
      .getCompanys()
      .subscribe((data: Company[]) => {
        this.comapnies = data;
    });
  }
}

Angular 6 HTTPClient GET Request To Listing

Last steo, source code the Basic HTML file that listing the comapnies data.

<h2>Angular 6 HTTPClient GET Request Example</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Author</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let company of comapnies">
      <td>{{ company.id }}</td>
      <td>{{ company.name }}</td>
      <td>{{ company.devloper }}</td>
    </tr>
  </tbody>
</table>

Angular 6 Http Get Example Tutorial
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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

I hope you get an idea about Angular 6 HttpClient – Get/Post/Put/Delete requests.
I would like to have feedback on my Pakainfo.com 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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Angular 6 and ASP.NET Core 2.0 Web API Example
  2.   Angular 6 Http Request Methods Tutorial with Example
  3.   Server-side processing Laravel DataTables
  4.   User Registration and Login Authentication Code using angular 6
  5.   Laravel Check Duplicate Records before insert
  6.   Vue.JS Automatically Page Redirection
  7.   Laravel 5.6 Dependent Dynamic dropdown Example Tutorial
  8.   Angular 6 CRUD Tutorial Example From Scratch
  9.   Laravel Insert Update Delete in Eloquent ORM laravel
  10.   Laravel 6 Check if a File exists before create directory

Leave a Reply

Your email address will not be published. Required fields are marked *