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

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

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

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

– Step 1:

– Step 2:

– Step 3:

Project is created:

Add Firebase to your web application:

– Create Cloud 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:

Running and Testing

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

– Cloud Firestore:

Sourcecode – Integrate Angular 9 Firestore Example

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

Angular-9-Firestore-Integration-using-angular-fire

– Github sourcecode:

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