Integrate Angular 10 Firestore Tutorial using @angular/fire

Integrate Angular 10 and Cloud Firestore

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


Video Guide – Integrate Angular with Firebase Firestore

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

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

Angular 10 Firestore Diagram Architecture Integration
Angular 10 Firestore Diagram Architecture Integration

Technology:
– Angular 10
– @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-3
Firebase-Create-a-Project-3

– Step 1:

Create-Firebase-project-step-1-3
Create-Firebase-project-step-1-3

– Step 2:

Create-Firebase-project-step-2-3
Create-Firebase-project-step-2-3

– Step 3:

Create-Firebase-project-step-3-3
Create-Firebase-project-step-3-3

Project is created:

Project-is-created-successfully
Project-is-created-successfully

Add Firebase to your web application:

Add-Firebase-to-Web-App (Angular 10 + Firestore)
Add-Firebase-to-Web-App (Angular 10 + Firestore)
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
Cloud-Firestore – initial successfully
Firestore - add a collection
Firestore – add a collection

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 10 and Firestore Tutorial - successfully
Integrate Angular 10 and Firestore Tutorial – successfully

– Cloud Firestore:

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

Sourcecode – Integrate Angular 10 Firestore Example

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

Angular-10-Firestore-Integration

– Github sourcecode:

Github-Integrate-Angular-10-Firestore

Leave a Reply

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