Ionic 4 CRUD Operations Using Firebase and Firestore Database Tutorial in Ionic 4 with Angular 7

In this post, we will use Firebase and Firestore’s NoSQL Database in Ionic’s latest version 4. In our tutorial, we will implement CRUD operations which stand for Create, Read, Update and Delete.

CRUD operations are some of the basic and required by most of the application dealing with database communications. Here we will use Firestore which is Google Firebase service providing Cloud-based storage services.

Let’s begin with our tutorial 🙂

Also See: How to Implement Firestore CRUD Operation in Angular 7/6 Application

Create Ionic 4 Application

Make sure you have installed the latest version of Ionic CLI and NPM installed.

Create a new app by running following command with a blank template

Create a Firebase Project

If you already having any Firebase project, you can use that or follow these steps to create one and enable Firestore database. After creating a Firebase project we will use credentials in our Ionic Application.

Step 1) Visit Firebase here then click on Get Started if you have not created an account yet.

Step 2) Click on “Add project” then enter app related information click on “create”

Step 3) Next click on “Web App” icon to get configuration text with app secret info which we will add in out Ionic 4 Application to communicate with services related to this Firebase project.

Step 4) Then enable Firestore Database service in your Firebase project.

Click on “Database” in the left sidebar, then click on “+ Add collection” enter name “Students” you can add anything you want. Here we are creating example data for Students. Then hit “Next

On next screen delete the record on focus for this example or you can enter any dummy row data. We will add directly from App. After deleting then hit Save

Now we have Firebase project and Firestore Database with a collection “Students” is ready, the next step is to connect our Ionic 4 Application with Firebase and Firestore Database.

Adding Firebase in Ionic 4 Application

Now open the Environment file at location “~Ionic4Firestore/src/environments/environment.ts” then add Firebase project credentials as shown below

Install Firebase in Application

Install Firebase SDK and @angular/fire package by running below CLI command

 

In app’s main module file we will import Firebase and Initialize firebase with environment credentials

Replace below code in you app.module.ts file

by following above steps your application is connected with Firebase and ready to perform CRUD operation on Firestore Database.

Create a Service with Firestore CRUD methods

Now create a service with CRUD operation methods. Service methods can be used anywhere without rewriting again and again.

Create a new service “~Ionic4Firestore/src/app/service/crud.service.ts“, having the following methods

create_NewStudent: Create a new record in the specified collection using add method
read_Students: Call snapshotChanges method which will get records and also subscribe it to get updates
update_Student: Update record by taking ID then calling update method
delete_Student: Call delete method by taking record id
Replace below code in the crud.service.ts file

The final step is to create a page for User Interaction where we can create a new record and can view all rows available in the collection.

A user can also click on Edit and Delete buttons to perform record actions. In edit mode, the user can Cancel or Update changes.

To keep tutorial simple we will update existing home component which is created by default in blank Ionic 4 template.

Changes in home.page.ts file

Update home.page.html with the following code

That’s it now you can run the application in your browser by running

In the above post, we discussed on How to Add Firebase and Firestore in Ionic 4 Application to perform CRUD operation to Create, Read, Update and Delete records in database collections.

Leave a Reply

avatar
  Subscribe  
Notify of