@angular/fire Integrate Angular 9 + Firebase RealTime Database Example

@angularfire - Angular 9 Firebase Realtime Database Integration

Tutorial: Integrate Angular 9 Firebase Realtime Database using @angular/fire example

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 @angular/fire”.

– 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.

Related posts:


Overview Project – @angular/fire Integrate Angular 9 Firebase Example

Angular Web Application uses Angular Firebase lib @angular/fire to interact with Firebase realtime database.

Angular Firebase Diagram Architecture
Angular Firebase Diagram Architecture

Technology:
– Angular 9
– @angular/fire

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:

Firebase Create a Project
Firebase Create a Project

– Step 1:

Create Firebase project - step 1
Create Firebase project – step 1

– Step 2:

Create Firebase project - step 2
Create Firebase project – step 2

– Step 3:

Create Firebase project - step 3
Create Firebase project – step 3

Project is created:

Project is created successfully
Project is created successfully

Add Firebase to your web application:

Add Firebase to Web App
Add Firebase to Web App
Add Firebase to Web App - Register App
Add Firebase to Web App – Register App
Register Firebase Successfully - Get Firebase Script register
Register Firebase Successfully – Get Firebase Script register

– Create Firebase Realtime database:

Create Firebase database
Create Firebase database
Choose test mode for creating Firebase database
Choose test mode for creating Firebase database
Now Firebase database is created
Now Firebase database is created

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 @angular/fire and Firebase:

npm install firebase @angular/fire --save

Integrate Firebase in Angular Project using @angular/fire

– Add Firebase config to environments variable:

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

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyBmeT3HEMFfjNmho1F5liOclLkjBNKJrmU",
    authDomain: "loizenai-firebase.firebaseapp.com",
    databaseURL: "https://loizenai-firebase.firebaseio.com",
    projectId: "loizenai-firebase",
    storageBucket: "loizenai-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 '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/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 @angular/fire module in Angular component by opening /src/app/app.component.ts and then adding below code:

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular8Firebase';
  description = 'Angular-Fire-Demo';
 
  itemValue = '';
  items: Observable;
 
  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-5" 
        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%);">
					<h5>Firebase RealTime Database with Angular</h5>
					<hr>
					<p>
						<strong>@Copyright</strong> by <span style="color: blue">
						<a href="https://loizenai.com">https://loizenai.com
						</a></span>
						 <br> 
						<strong>youtube</strong>: <span style="color: crimson">
						<a href="https://www.youtube.com/channel/UChkCKglndLes1hkKBDmwPWA">loizenai
						</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>
    <hr>
    <h4>Data from Firebase Realtime Database</h4>
    <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>

– Add Bootstrap in index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularFirebaseDatabase</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
  <app-root></app-root>
  </div>
</body>
</html>

Finally Angular Firebase Project Structure:

Integrate Angular Firebase Project Structure
Integrate Angular Firebase Project Structure

Running and Testing

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

Angular 9 inputs and shows data from Firebase Realtime Database using Angular-Fire
Angular 9 inputs and shows data from Firebase Realtime Database using Angular-Fire

– Firebase Realtime Database:

Firebase Realtime Database
Firebase Realtime Database

Sourcecode – Integrate Angular 9 Firebase Example

Sourcecode for “@angular/fire Integrate Angular 9 Firebase Example – Firebase Realtime Database”:

Integrate-Angular-9-Firebase-Database-with-Angular-Fire

– Github sourcecode:

Github-Angular-Firebase

Leave a Reply

Your email address will not be published. Required fields are marked *