Integrate Angular 9 Firebase Realtime Database Example using AngularFire2

Integrate Angular 9 Firebase Example – Firebase Realtime Database using AngularFire2

Tutorial: Integrate Angular 9 Firebase Example with Firebase Realtime Database

Firebase is a platform developed by Google for creating mobile and web applications. Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. So In the tutorial, I introduce an example “Integrate Angular 9 Firebase using Realtime database” using AngularFire2.

– I draw overview diagram architecture of our system.
– Create a Firebase account and setup a Firebase Realtime database.
– Setup an Angular WebApp that integrate with Firebase using AngularFire2

Overview Project – Integrate Angular 9 Firebase Example

Angular Web Application uses Angular Firebase lib (AngularFire2) to interact with Firebase database.

Technology:
– Angular 9
– AngularFire2

Create Firebase Account and Setup Firebase Realtime database

You go to Firebase Console at here, login with your Google Account, then click on Add Project.

Enter Project name, select Country/Region:

– Step 1:

– Step 2:

– Step 3:

Project is created:

Add Firebase to your web application:

– Create Firebase Realtime database:

Implement Angular Firebase Web App

Install AngularFire2

Before installing AngularFire2, make sure that we have latest version of Angular-cli installed. The lowest compatible version is 1.x.x-beta.14. We also need Typings, and TypeScript.

So, if you don’t have these things, try to install them:

npm install -g @angular/cli@latest
# or install locally
npm install @angular/cli --save-dev
 
npm install -g typings
npm install -g typescript

Create Angular Project

Create Angular project by cmd:

ng new 
cd 

– Install AngularFire2 and Firebase:

npm install angularfire2 firebase --save

Integrate Firebase in Angular Project using AngularFire2

– Add Firebase config to environments variable:

Open /src/environments/environment.ts, add your Firebase configuration:

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyBmeT3HEMFfjNmho1F5liOclLkjBNKJrmU",
    authDomain: "loizenjava-firebase.firebaseapp.com",
    databaseURL: "https://loizenjava-firebase.firebaseio.com",
    projectId: "loizenjava-firebase",
    storageBucket: "loizenjava-firebase.appspot.com",
    messagingSenderId: "887328809823"
  }
};

– Setup Angular @NgModule, open /src/app/app.module.ts, import AngularFireModule and other AngularFire2 modules if necessary. Don’t forget specify Firebase configuration with AngularFireModule.initializeApp(firebaseConfig):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule, // for database
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use AngularFire module in Angular component by opening /src/app/app.component.ts and then adding below code:

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'loizenjava.com';
  description = 'Angular-Firebase Demo';
 
  itemValue = '';
  items: Observable<any[]>;
 
  constructor(public db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();
  }
 
  onSubmit() {
    this.db.list('/items').push({ content: this.itemValue });
    this.itemValue = '';
  }
}

– Change html file of App Component:

<div class="row">
  <div class="col-sm-7" 
        style="background: linear-gradient(to bottom, #ffffff 0%, #ccffff 100%);
                margin: 10px; padding: 10px; border-radius:8px">

    <div style="margin:10px; padding:10px;border-radius:7px;background: linear-gradient(to bottom, #ffffff 0%, #ffccff 100%);">
					<h3>Integrate Firebase with Angular 9</h3>
					<hr>
					<p>
						<strong>@Copyright</strong> by <span style="color: blue">
						<a href="https://loizenjava.com">https://loizenjava.com
						</a></span>
						 <br> 
						<strong>youtube</strong>: <span style="color: crimson">
						<a href="https://www.youtube.com/channel/UChkCKglndLes1hkKBDmwPWA">loizenjava
						</a></span>
					</p>
		</div>

    <div>
      <form (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="item">Item</label>
          <input type="text" class="form-control" id="item" placeholder="Enter content..."
                required [(ngModel)]="itemValue" name="item">
        </div>
  
        <div class="btn-group">
          <button type="submit" class="btn btn-success">Submit</button>
        </div>
      </form>
    </div>
  
    <h2>Data from Firebase</h2>
    <div style="background: linear-gradient(to bottom, #ffffff 0%, #ffffcc 100%);
                padding:10px; border-radius:8px">
      <li *ngFor="let item of items | async">{{item.content}}</li>
    </div>
  </div>
</div>

Finally Angular Firebase Project Structure:

Running and Testing

– Open browser with url http://localhost:4200/, enter Item content.
Item data displays immediately:

– Firebase Realtime Database:

Sourcecode – Integrate Angular 9 Firebase Example

Sourcecode for “Integrate Angular 9 Firebase Example – Firebase Realtime Database”:

Angular-9-Firebase-Example-Integration

– Github sourcecode:

Github-Angular-9-Firebase