Integrate Angular 8 Firebase Example – Firebase Realtime Database using AngularFire2

Integrate Angular 8 Firebase

Tutorial: Integrate Angular 8 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 8 Firebase using Realtime database”.

– 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 – Integrate Angular 8 Firebase Example

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

Angular Firebase Diagram Architecture
Angular Firebase Diagram Architecture

Technology:
– Angular 8
– 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:

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 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: "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 '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 = 'loizenai.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 8</h3>
					<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>
  
    <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:

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:

Integrate Firebase with Angular 8 - Result
Integrate Firebase with Angular 8 – Result

– Firebase Realtime Database:

Firebase Realtime Database
Firebase Realtime Database

Sourcecode – Integrate Angular 8 Firebase Example

Angular-8-Firebase-Example-Integration

– Github sourcecode:

Github-Angular-8-Firebase-Example

Leave a Reply

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