Crud cheatsheet for Firebase and Angular

Firebase Cloud Firestore is “the next generation of the Realtime Database with more powerful queries and automatic scaling.” It is was acquired by Google in 2014, and is a realtime cloud-based NoSql database solution.

This article aims to show you how to perform basic NoSql Crud operations using Angular 9. I have written previous articles on how to set up Firebase with angular, and will link them at the bottom.

One of my favorite aspects of Firestore and Angular is the socket connection to the database will live update your Angular components whenever a crud operation happens.

C — Create

On all four operations, you will need to inject a Firestore database reference like so:

In out html, we will be using a reactive form to create our database record.

We will declare our form to match the database schema.

Once the form is valid, and a button is clicked, we are now ready to insert a record into our database.

If you go to the Firebase console, you will now see your newly inserted record.

R — Read

Read can start out looking like:

this.jobs = db
.collection<any>(‘jobs’)
.valueChanges();

and you can bind `this.jobs` to a table using an async pipe to get all the jobs collection. Where it gets interesting is when you want to delete a record. By default subscribing to the valueChanges() function, does not include the database Id’s. Below is an example of how I am getting the Id’s in preparation for delete/update events.

U — Update

In this example, I am passing the database id as a parameter to my component. I am hooking it up to the same form from before, and defaulting the values.

When edits are made and save button hit, it will call the editJob() function.

D — Delete

Delete method needs to have the firestore document id. I showed how to map to that in the Read action above.

Link to how to set up angular and firebase
Link to working repository and code
Demo