Gurmandeep Singh

Web Programmer

Angular HTTP GET Request with Firebase

Hi Folks, In Previous Post we have seen how to send http post request to Firebase.

Today we will see how to send HTTP GET request to firebase.

First of all open http.service.ts and replace it with the code below:

 

Component

Now we are going to create component that will display the data.

open cmd and run

Now open all-data.component.ts and replace it with following code

Open all-data.component.html and replace it with the following

Guys, In previous post we did not make routes because we have only one view but now we have to create routes because we have multiple views.

One view will display the form that will use to send post request and the another one will  display data.

so now open app.module.ts and replace it with the following code

So app is ready now. 🙂

Run command

open url http://localhost:4200

After submit your data open http://localhost:4200/allData

and see your submitted data

You can see the demo here

http://gurmandeep.in/ng-http-request

 

You can download source from my GitHub Repository

Thanks.

Angular2 HTTP POST Request with Firebase

Hi Folks, We are going to create a simple application that used to send HTTP POST request to Firebase.

 

First of all open cmd and install angular-cli using command

 

After installation of angular-cli, create your angular2 project using following Command

 

Now open cmd into your project directory and run command

 

Now open following url.

http://localhost:4200

and you will see the front page of your Application


Now open app folder and create Components folder.

Run Following command to create component

Here g is generate , is component, Components is folder name and form is component name

Now copy selector from form.component.ts and paste it into app.components.html

Open form.component.html and replace with following

so now I am going to include Twitter Bootstrap.

Install bootstrap by following command

If you wanna include bootstrap 3 then run following command

Now open angular-cli.json and inlcude bootstrap path into styles.

Restart your app
Now form is ready 🙂

 

SETUP Firebase

Open firebase.google.com then go to console and create project


After creating project click on it and then click on database.
we have to change rules to write and read the data.

Service
Create Services folder within app folder
open cmd and run following command

now open app.module.ts and import service

After importing service open http.service.ts

and update it with following code.

 

Now open Firebase and click on Database and copy endpoint and replace it into http.service.ts

Now open form.component.ts and replace with the following

Your application is ready. Now open http://localhost:4200

Enter title and content and submit it

open firebase to check your submitted data.

Thanks 🙂

 

You can download source from my GitHub Repository