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: