Integrate Angular 8 Firestore Tutorial using @angular/fire

Integrate Angular 8 with Firestore using angular-fire

Tutorial: Integrate Angular 8 Firestore using @angular/fire

Firestore is a NoSQL document database built for automatic scaling, high performance, and ease of application development. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. So In the tutorial, I introduce an example “Integrate Angular 8 Firestore using @angular/fire”.

– I draw overview diagram architecture of our system.
– Create a Firebase account and setup Cloud Firestore.
– Setup an Angular WebApp that integrate with Firestore.

Related posts:


Overview Project – @angular/fire Integrate Angular 8 Firestore Example

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

Angular 8 Firestore Diagram Architecture Integration
Angular 8 Firestore Diagram Architecture Integration

Technology:
– Angular 8
– @angular/fire

Create Firebase Account and Setup Firestore

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 - (Angular 8 + Firestore Tutorial)
Firebase Create a Project – (Angular 8 + Firestore Tutorial)

– Step 1:

Create Firebase project step 1 - Angular 8 + Firestore tutorial
Create Firebase project step 1 – Angular 8 + Firestore tutorial

– Step 2:

Create Firebase project step-2 - Angular 8 + Firestore tutorial
Create Firebase project step-2 – Angular 8 + Firestore tutorial

– Step 3:

Create Firebase project step-3 - Angular 8 + Firestore tutorial
Create Firebase project step-3 – Angular 8 + Firestore tutorial

Project is created:

Project is created successfully - Angular 8 + Firestore tutorial
Project is created successfully – Angular 8 + Firestore tutorial

Add Firebase to your web application:

Add Firebase to Web App - (Angular 8 + Firestore Tutorial)
Add Firebase to Web App – (Angular 8 + Firestore Tutorial)
Add-Firebase-to-Web-App-Register-App (Angular 10 + firestore integration)
Add-Firebase-to-Web-App-Register-App (Angular 10 + firestore integration)
Register Firebase Successfully Get Firebase Script register (Angular 10 + Firestore integration)
Register Firebase Successfully Get Firebase Script register (Angular 10 + Firestore integration)

– Create Cloud Firestore:

Cloud Firestore - initial successfully - Angular 8 + Firestore tutorial
Cloud Firestore – initial successfully – Angular 8 + Firestore tutorial
Create a Firestore
Create a Firestore

Implement Angular Firestore Web App

Install @angular/fire

Before installing @angular/fire, 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 Firestore Project

Create Angular project by cmd:

ng new AngularFirestoreIntegration
cd AngularFirestoreIntegration

– Install @angular/fire and Firebase:

npm install firebase @angular/fire --save

Integrate Firestore 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: "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 & AngularFirestoreModule and other 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 { AngularFirestoreModule} from '@angular/fire/firestore';
import { environment } from '../environments/environment';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  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 { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
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<any[]>;

  private dbPath = '/items';
  customersRef: AngularFirestoreCollection<any> = null;
 
  constructor(public firestore: AngularFirestore) {
    this.items = firestore.collection('items').valueChanges();
  }
 
  onSubmit() {
    this.firestore.collection('items').add({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>Integrate Angular with Firestore</h5>
					<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>
    <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>AngularFireStore</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-Firestore Project Structure:

Angular Firestore Integration - Project Structure
Angular Firestore Integration – Project Structure

Running and Testing

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

Integrate Angular 8 and Firestore Tutorial - successfully
Integrate Angular 8 and Firestore Tutorial – successfully

– Cloud Firestore:

Integrate Angular 8 and Firestore Tutorial - check firestore collection
Integrate Angular 8 and Firestore Tutorial – check firestore collection

Sourcecode – Integrate Angular 8 Firestore Example

Sourcecode for “Integrate Angular 8 Firebase Example – Cloud Firebase”:

Angular-8-Firestore-Integration-using-angular-fire

– Github sourcecode:

Github-Angular-8-Firestore-Integration-using-angular-fire

Leave a Reply

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