Firebase With Angular

Introduction

Here, we are going to understand how to use Firebase as a database as well as RESTful API for an Angular application.

Firebase is a really good option to store the data persistently and securely in the cloud. We don’t need to maintain any kind of database locally.  Firebase is backed by Google. For more information, just visit https://firebase.google.com/

In this document, we are going to set up Firebase, then we will create a portal in Angular 6 and we will do some simple and complex CRUD operations using Angular and Firebase.

Simple operations mean some simple objects with string, number, and boolean data will store and retrieve and on the complex side, we will manage images.

Environment Setup - Firebase

First, visit (https://firebase.google.com) url to open the Firebase website.

Now, select "GET STARTED" button.

Then, you can find this page.

Select "Add Project".

Fill in the required information and select “Create project”.

From the above three buttons, select the desired button. I am choosing "Add Firebase to your web app".

The snippet contains initialization information to configure the Firebase JavaScript SDK to use Authentication, Cloud Storage, Realtime Database, and Cloud Firestore. You can reduce the amount of code that your app uses by only including the features that you need. The individually installable components are,

• firebase-app — The core firebase client (required)
• firebase-auth — Firebase Authentication (optional)
• firebase-database — Firebase Realtime Database (optional)
• firebase-firestore — Cloud Firestore (optional)
• firebase-storage — Cloud Storage (optional)
• firebase-messaging — Firebase Cloud Messaging (optional)
• firebase-functions — Cloud Functions for Firebase (optional)

You can use the <script> in any web application so your web application can easily interact with Firebase.

Step 1 - Select “Develop”.

Step 2 - Select “Database”.

Select the “Get started” button in Cloud Firestore Beta.

Select “Start in test mode” option and click “Enable” button.

Select “Add collection”.

When your collection is completed, you can save the collection by clicking the “Save” button.

One can create a more complex database using "Add document" and "Add collection" options. Also, we can add data into a database by using "Add field" and its value also.

Environment Setup - Angular application

Now in step 2, we can start developing the web application using Angular. Here, I will start development using Angular-cli. If you are new to Angular,  here I would like to throw some light on Angular too for you.

Angular.js is the old version of Angular. It is basically a JavaScript framework and we can easily develop client-side web applications using it. To start with Angular, we need node or npm installed on our local machine.

Please find the below link to download and install node platform.

https://nodejs.org/en/

Here, as per your local environment, you can download and install the setup. When the Node.js gets successfully installed, open the terminal or console and use node commands.

See the below image.

Firebase Database

Now, we can start the installation of Angular-cli on a local machine.

Please visit the below site - https://cli.angular.io/

Create application ng new sample-app-firebase

After following those steps, we can easily create an Angular application on our local machine. Now, we need to install the npm packages for Firebase.

npm install angularfire2 firebase --save

Now, let us start creating the Angular app using Angular-cli.

After installing AngularFire2 Firebase, open it in any editor like Webstorm or VS Code.

From here, we are going to start the development.

Open app.module.ts

In default app.module file, I have added the below lines of code only.

import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
// Initialize Firebase
const config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "yyyyyyyyyyyyyyyyyy.firebaseapp.com",
    databaseURL: "https://zzzzzzzzzzzzzzzzzzz.firebaseio.com",
    projectId: "xyzyxyxyxyxyxyxyyxyx",
    storageBucket: "xyzdd929292999929.appspot.com",
    messagingSenderId: "939388384949494"
};

And I  imported the below two modules as well.

• AngularFireModule.initializeApp(config)
• AngularFireDatabaseModule

To improve our user interface, we can add bootstrap or material design templates also. Here, I have used bootstrap. I have created a simple component.

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
@Component({
 selector: 'app-root',
 template: `<h2>Sample Angular application firebase </h2>
 <ul>
   <li *ngFor="let item of items | async">
      First Name : <strong>{{ item.fname }}</strong>
      Last Name : <strong>{{ item.lname }}</strong>
      DOB : <strong>{{ item.DOB }}</strong>
   </li>
 </ul>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    items: Observable<any[]>;
    constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
    }
}

Run the Angular application using the command - "ng serve"

Firebase Storage

Using this option is useful when the application is required to store and retrieve the images or videos.

To improve our user interface, we can add bootstrap or material design templates also. One can get more information about it from Firebase.

We can use Firebase as a NoSQL database not only for web applications but for Android and iOS mobile applications too.

References

• https://firebase.google.com/docs/?authuser=0
• https://angular.io/

Conclusion

This was all about communicating Angular with Firebase. Please feel free to ask any questions and make comments.

Happy coding :)