4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

INVESTMEN

HOME BASICS  BACKEND  FRONTEND 

ABOUT US PRIVACY POLICY CONTACT US

 ANGULAR
6 FORMS
TUTORIA
EXAMPLE
FROM
SCRATCH
 ANGULAR
6
ROUTING
EXAMPLE
 ANGULAR ANGULAR
6 CRUD
EXAMPLE
TUTORIA
FROM Angular 6 Http Get
SCRATCH
Example
 ANGULAR
6 EVENT
 MAY 14, 2018  8 MIN READ
BINDING
EXAMPLE
TUTORIA
 ANGULAR
COMPON
TUTORIA
WITH
EXAMPLE In this tutorial, we will see Angular
 ANGULAR 6 Http Get Example.  Most modern
6 front-end applications
LOADING
SPINNER communicate with backend
EXAMPLE services over the HTTP protocol.
 ANGULAR They communicate via an API. The
FORM HttpClient in
VALIDATI @angular/common/http o ers a
EXAMPLE
simpli ed client HTTP API for
TUTORIA
Angular applications that rests on
 ANGULAR 
MATERIA the XMLHttpRequest interface.
DATEPIC
EXAMPLE For this example, we will create a
TUTORIA backend JSON server. Then Angular
https://investmentnovel.com/angular-6-http-get-example/ 1/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

 ANGULAR 6 application will send a network

6 CHARTS request to JSON Server and then get
EXAMPLE
TUTORIA a response from the server and
FROM display the data on the frontend.
SCRATCH We use HttpClient API provided by
 ANGULAR Angular CLI. 
DEPENDE
INJECTIO Now, we start our Angular 6 HTTP
TUTORIA
EXAMPLE Get Example Tutorial by installing
FROM Angular 6 on our local machine.
SCRATCH
 ANGULAR
Table of Contents 
OBSERVA
1. Angular 6 Http Get Example
EXAMPLE
2. #1: Install Angular 6 project.
TUTORIA
3. #2: Create a JSON server.
FROM
4. #3: Setup HttpClient.
SCRATCH
5. #4: De ne our Book.ts model.
6. #5: Make a service that communicates
to the server.
 C
7. #6: Create a table that displays the data.
 ANGULAR 8. Github Code

 VUE.JS

 BOOTSTRA
ANGULAR 6 HTTP GET
 LARAVEL EXAMPLE
 NODE.JS We install Angular via Angular CLI.
 MONGODB
#1: INSTALL ANGULAR
6 PROJECT.
If you have not installed Angular
CLI globally on your machine, then
install it using the following
command.

npm install -g @angular/cli



# or

yarn add global @angular/cli

Now, create a local project using 

the following command.

https://investmentnovel.com/angular-6-http-get-example/ 2/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

Replay

ng new ng6http


Now, start the application using the

following command.

ng serve --open


#2: CREATE A JSON

SERVER.
For getting JSON response from an
API, we do need a server.  To create
a server, right now, there are lots of
packages are available. We use
json-server package. So let us
install that package.
 Search the site

yarn global add json-server



FIND US ON
# or
FACEBOOK
npm install -g json-server

InvestmentNo
41 likes

Like Page 

Be the first of your friends to l

https://investmentnovel.com/angular-6-http-get-example/ 3/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

CATEGORIES

ANGULAR

BOOTSTRAP

Replay
C

LARAVEL

MONGODB

Now we need to create a folder NODE.JS

inside src directory  called  data  and

VUE.JS
in that folder, create one le
called  db.json.  Let us add the
following data inside a db.json  le. FOLLOW US

{

"books": [
   
{
"id": "1",
"name": "A song of ice and fi
"author": "George RR Martin"
},
{
"id": "2",
"name": "Harry Potter",
"author": "JK Rowling"
},
{
"id": "3",
"name": "Anna Karenina",
"author": "Leo Tolstoy"
},
{
"id": "4",
"name": "Great Expectations",
"author": "Charles Dickens"
},
{
"id": "5",
"name": "Middlemarch",
"author": "George Eliot"
}] 
}

https://investmentnovel.com/angular-6-http-get-example/ 4/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

Now, we need to start a JSON server

that serves this data. So go to the
terminal and type the following
command.

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



Now, you can access all the books

on this
URL: http://localhost:4000/books

#3: SETUP
HTTPCLIENT.
Now, Angular comes with
HttpClient Module, so we just need
to register inside our application.
So open the  app.module.ts  le and
write the following code.

// app.module.ts


import { HttpClientModule } from '@an

imports: [
BrowserModule,
HttpClientModule
],

#4: DEFINE OUR

BOOK.TS MODEL.
We have created the JSON server, so
we know that what kind of data
backend will serve to our
application.

So, we will create one interface on

the Angular application that has all 
the datatypes of our backend.

https://investmentnovel.com/angular-6-http-get-example/ 5/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

It is kind of modeling of our data;

we de ne the schema of the
backend data at frontend.

Inside app folder, create one le

called Book.ts.

// Book.ts


export interface Book {

id: Number;
name: String;
author: String;
}

So, we get the data of Books, and its

datatype is array, but its properties
datatypes are Number and String.

What I am trying to say is that,

from the JSON server, we are
expecting an array of Books. 

The books are consist of di erent

properties. Those properties
datatypes are de ned as above in
the interface.

#5: MAKE A SERVICE

THAT
COMMUNICATES TO
THE SERVER.
Now, inside  app  folder, we need to
create one service le that talks to
the server and fetch the data from
an API. So type the following
command to generate the service
le.

 
ng g s book --spec false

https://investmentnovel.com/angular-6-http-get-example/ 6/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

Now, import this service

inside app.module.ts  le.

// app.module.ts


import { BookService } from './book.s

providers: [BookService],

Next step is to write the code that

sends the GET request to the server
and fetch the data.

// book.service.ts


import { Injectable } from '@angular/

import { HttpClient } from '@angular/

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

url = 'http://localhost:4000';
constructor(private http: HttpClien

getBooks() {
return this
.http
.get(`${this.url}/books`)
}
}

#6: CREATE A TABLE

THAT DISPLAYS THE
DATA.
Now, inside  app.component.ts  le,
we need to add the code that calls
the service’s function.

 
// app.component.ts

import { Component , OnInit} from '@a

import { BookService } from './book.s

https://investmentnovel.com/angular-6-http-get-example/ 7/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

import { Book } from './Book';

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

constructor(private bookService: Bo

ngOnInit() {
this
.bookService
.getBooks()
.subscribe((data: Book[]) => {
this.books = data;
});
}
}

Now, nally code the HTML le

that displays the data.

<table>

<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of books">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
</tr>
</tbody>
</table>

Save the le and if everything is

con gured correctly then you can
see the table with the data at this

URL: http://localhost:4200/

https://investmentnovel.com/angular-6-http-get-example/ 8/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

At last, Angular 6 Http Get Example

Tutorial is over. You can nd the
source code on Github.

GITHUB CODE

Tweet Like 2

Save

ANGULAR ANGULAR 6

RELATED POSTS

ANGULAR ANGULA

Angular Angula
6 6
CRUD Forms

ADMIN ADMIN
ADMIN

POST YOUR THOUGHTS

COMMENT TEXT*


Name*

https://investmentnovel.com/angular-6-http-get-example/ 9/10
4/15/2020 Angular 6 Http Get Example Tutorial From Scratch

Email*

Website

Save my name, email, and website in

this browser for the next time I comment.

SEND

This site uses Akismet to reduce spam.

Learn how your comment data is processed.

ONE RESPONSE

ZEI 
Avatar
An excellent tutorial,
deserves more attention.

Copyright 2020 ©  InvestmentNovel.  All rights reserved  

https://investmentnovel.com/angular-6-http-get-example/ 10/10