Angular 4 – CRUD with firestore

Hi Friends,

Hope you are all well. In this post let’s see how to do a simple CRUD(create, read, update, delete) operation from your Angular4 apps on the newly introduced Cloud Firestore from firebase.

We’ll be making use of angularfire2 library for this.

Let’s begin.

A screencast of this post:

 

Code for this post is available – here

Scaffold out an angular project using the cli tool and open it in your favorite editor.

Now install firebase and angularfire2 dependecies using the commands mentioned below.

Now let’s bring in firebase into our app.

Open up environment.ts file in the environments directory(present in the root directory of your app) and modify it as shown below.

Note: copy your configuration from your firebase app and paste it.

Now that we have firebase in, let’s add the imports.

Open app.module.ts and add the below imports.

Note that I am using two imports one for AngularfireModule and one for AngularFirestoreModule.

I am also importing the forms module to make use of forms.

Now open up app.component.html and add the following lines of code.

This is pretty much self-explanatory right ? We are simply adding a couple of input fields and a button. Upon clicking the button this will get added to the firestore collection.

Below is a diagram explaining how data gets stored in firestore. (For those who already know a little bit about nosql, this would  be familiar).

-my diag

Let’s move on.

Open up app.component.ts and add the below code.

Let’s break this down.

I am creating a new collection called products in firestore and then adding our data as a document under the id yourid.

You would also see your data being displayed on the screen as well.

Now let’s see how to update the data as well.

It’s pretty much simple. First let’s add a couple of buttons for updation and deletion.

Open up app.component.html and modify it as shown below.

Let’s write the code for these functions in our app.component.ts, Open it up and add the update function as shown below.

Now if you click on the update button it will update the product name to newprodname in the document.

Wait; if we are to specify the id of the document every time we need to update it, then what would we do if we are to handle a list of documents right ? Well, the simplest way is to use the add() method and then perform a subsequent update to include the document id as well in the document. Then this id can be referenced whenever we need to update / delete the document.

Let’s do some slight modification to the html code of the buttons to send the product as well while making the function calls.

Now open up app.component.ts and modify it as shown below.

We are simply adding the id of the document into the document as well (for easy reference) and then using the same to update, delete the document.

This is how you can save, read, update & delete data in your collections in firestore. There are a lot of other features like using where clauses in your queries,  offline persistence etc., We’ll see that in the upcoming videos.

Hope this helped you guys; if you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!
  • Frederiko M. Ribeiro

    Thanks!