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: