Integrate Angular 10 + Firebase RealTime Database using @angular/fire

@angularfire - Angular 10 Firebase Realtime Database Integration

Tutorial: Integrate Angular 10 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 10 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:


Video Guide – How to integrate Angular with Firebase Realtime Database

Overview Project – @angular/fire Integrate Angular 10 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 10
– @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

Create Angular Project

Create Angular project by cmd:

ng new project-name
cd project-name

– 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 10 inputs and shows data from Firebase Realtime Database using Angular-Fire
Angular 10 inputs and shows data from Firebase Realtime Database using Angular-Fire

– Firebase Realtime Database:

Firebase Realtime Database
Firebase Realtime Database

Sourcecode – Integrate Angular 10 Firebase Example

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

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

– Github sourcecode:

Github-Angular-Firebase

Leave a Reply

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