Angular 9 CRUD operation Using Firebase Firestore

Introduction

In this article, we are going to learn how to do CRUD operations in Angular applications with Firebase Cloud Firestore.

What is CRUD ?

CRUD is an acronym for CREATE, READ, UPDATE, DELETE.

Step 1

Create a new Angular project

ng new Angular9Firestore
cd Angular9Firestore

Step 2

Now, let’s install Firebase

npm i --save firebase @angular/fire

Step 3

Setting up Firebase

Go to your Firebase console and add a new project

Add a project name, accept the terms and conditions and click on create project.

Go to firestore database

You will get an empty Firestore database like this.

Step 3

Go back to your Firebase web console and grab the config details to use in your Angular app. This is located on your Project Overview page. It looks something like this:

Copy the highlighted section of the code, navigate to your environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_apiKey",
    authDomain: "YOUR_authDomain",
    databaseURL: "YOUR_databaseURL",
    projectId: "YOUR_projectId",
    storageBucket: "YOUR_storageBucket",
    messagingSenderId: "YOUR_messagingSenderId"
  }
 };

Step 4

Now Import the packages you installed earlier into your app.module.ts

import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
...
@NgModule({
...
imports: [
...
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
   ]
...
})

Step 5

In xyz.component.ts file, we can import the Firestore through our Angular/fire package:

import { AngularFirestore } from "@angular/fire/firestore";

After importing, we can initialize it in our constructor like this:

constructor(private firestore: AngularFirestore) {}

Step 5

we are ready to use CURD operation

CREATE

In our xyz.component.html file, let’s add a form to capture and send new data. Write something like this:

<form [formGroup]="this.form">
  <input
    placeholder="New Value"
    formControlName="newValue"
    type="text"
    class="input-field col s12"
  />
  <button (click)="onSubmit()">
    Submit
  </button>
</form>

Now, if you used the HTML above, add the following import to our xyz.component.ts file:

Then, in our class, add:

form = new FormGroup({
        newValue: new FormControl('')
    })
 ....
onSubmit() {
        this.firestore.collection('testCollection').add({
            field: this.form.value.newValue
        })
        .then(res => {
            console.log(res);
            this.form.reset();
        })
        .catch(e => {
            console.log(e);
        })
    }

‘testCollection’ name of firebase collection ,you can give any name ,it will created in firebase

READ

this.firestore
  .collection("testCollection")
  .get()
  .subscribe((ss) => {
    ss.docs.forEach((doc) => {
      this.myArray.push(doc.data());
    });
  });

‘myArray’ is an array ,we can push values into that array and display in .html by using *ngFor

UPDATE

First we fetch the id for update and delete,we let the Firestore automatically generate the id's

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.form.value.newValue));
docRef.snapshotChanges().forEach((changes) => {
  changes.map((a) => {
    this.id = a.payload.doc.id;
  });
})

this.firestore.collection('testCollection').doc(this.id).update({ field: this.form.value.newValue});

DELETE

this.firestore.collection('testCollection').doc(this.id).delete();

Conclusion

You have now successfully created an Angular app that can Create, Read, Update, and Delete Firestore documents! As you can see, Firebase Firestore is easy to use and ready to go.

Now that you have a good idea of Firestore Basics, check out the official docs for more advanced topics.