How to retrieve data from the database using angular2 http get request

In this article, I am going to explain how to retrieve data from the database using angular 2 HTTP request, we are using  JSON placeholder API which is a fake and free online rest API to retrieve data from database,  you can get more information by clicking on this link “Jsonplaceholder

angular2 HTTP request

This article is divided into two sections, in the first section we are going to cover how to create initial directory structure  for angular 2 application using yeoman generator and the second section will help you creating new angular2 services, components and modules using Visual Studio source code editor

Yeoman Generator :

The yeoman generator creates initial directory structure for angular2 applications, the generated folder structure contains files and configurations which are required to execute angular 2 based application’s

To use yeoman generator first you must install node.js in your local system.

Navigate to the new folder of command prompt and run below commands

The “yo angular2-quickstart” command creates angular 2 directory structure something like below

angular-directory-structure

Once the directory structure is created then open it using Visual Studio source code editor by going through File -> Open Folder options, if you are new to Visual Studio source code editor then check this article how to setup a VSC in your local machine “Setting up visual studio code for angular2 application

I recommend you to use Visual Studio Angula2 typescript snippets extensions to make development faster and to avoid syntax errors

PostService :

What is an  angular service ?  a service is an application’s business logic or individual functions or configurations which are modularized and presented as services you can call service from any component

We must add @Injectable metadata declaration to the service so that the injector container can provide instance of the postservice if it is already created otherwise it create’s a new instance

Go to the app folder, create a new file and rename it to the “app.service.ts” then copy and paste below code , the getUserPosts method makes a request to jsonplaceholder api and returns posts information

 

PostComponent :

We need to build angular2 component for posts and it will act as a mediator between service and templates, we can have more than one component on templates, ex: header component, footer component, carousel etc…, the angular 2 component controls particular portion of the page, all front end validation’s you can perform at component level

In the metadata of component you need to specify selector, templateUrl and providers

The next step is to create a new file under app folder and rename it to the app.component.ts open file copy and paste below code then you must import the service like below and call PostService in the provider’s meta tag

AppModule :

Create a  file under app folder and rename it to the app.module.ts

Template :

Create a separate Html file under app folder called posts.component.html, and place below Html code in it,  the *ngFor iterates all posts and display title of every post

Edit the main.ts file under app folder and check are we importing root module or not , if not please change it accordingly, in this example the root module is AppModule which is specified in the app.module.ts file, so we must import AppModule in the main.ts file and bootstrap it using platform.bootstrapModule, the application launches by bootstrapping its root module

Once it is completed then start running the application by executing “npm start” command

keysandstrokes

Download Code