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 Angular9Firestorecd 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.