Overview

Firebase is from google, you can deploy your web-application using Angular for the front end and firebase for the end. Building backends with firebase is pretty easy, once you have learned how to do, it can be done in few minutes!

Firebase Features

• Authentication
• Cloud Messaging
• Storage
• Analytics

Many popular apps use Firebase as a backend. The beauty of firebase is it provides libraries for:

IOS Android JS C++

PS! this ones a bit long but the view at the end is worth it! So, hang in there. :)

Setting Up Firebase

1. Go to Firebase official site and sign up.
2. Create New Project







3. Create Database, go for realtime database and create nodes like depicted in the Screenshot below!





4. In rules do the following

Installing Firebase in Angular!

1. Go to your project directory from command prompt, create a new angular project if not created! nmp install firebase --save
   

   Which is the standard firebase library written in JavaScript!

   npm install @angular/fire --save
   

   Library for working with an angular 2+ app.

Adding firebase to the project!

1. Go to the project you created on firebase from there to overview!
2. Add web app!
3. Copy all the properties! Only properties nothing else!

   

4. Go to environment.ts in src directory of your project and add new property to environment, with key firebase.

   

5. Go to app.module.ts and import AngularFireModule and AngularFireDatabaseModule

   

6. Add the following to imports in @NgModule

   

We have successfully installed Firebase and Angular Fire to our project!

Next we are going to get data from our firebase Database

1. Go to app.component.ts and do the following!

   

2. Go to app.component.html and do the following!

   

Congratulations! you have just made your first app with Frontend in Angular and backend in Firebase!