Angular 6 HTTPClient GET Request Example

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.

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 applications – Insert, Fetch , Edit – update , Delete Operations
• Angular 6 CRUD
• Angular 6 and ASP.NET Core 2.0 Web API
• Angular 6 features
• Angular 6 Form Validation
• Angular 6 – User Registration and Login
• Angularjs 6 User Registration and Login Authentication
• Angular 6 CLI Installation Tutorial With Example
• Angular 6 Toast Message Notifications From Scratch

Angular 6 Http Get Example Tutorial

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

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.