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.


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

12
Leave a Reply

avatar
10 Comment threads
2 Thread replies
9 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
stephanusFlorian RosnayKelvinMaxPaul Pivot Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Carlos Julian
Guest
Carlos Julian

How can i filter by username, it’s possible with firebase?

Cremildo J. Comé
Guest
Cremildo J. Comé

I implemented the code from the tutorial above, but when “$ ionic serve” the app ignores the URL don’t showing it in the path and not accessing the required CRUD page. Even if i go in the browser and type the path to accessing it, after execute update browser to call the required CRUD page, the app ignores it and shows “http://localhost:8100/”. Always hangs on that!
Any help!

Pasquale Esposito
Guest
Pasquale Esposito

GREAT!!! I tried a lot of tutorials for ionic4/CRUD but they don’t work.
Your tutorial works at my first trial.
Thanks a lot

Awan
Guest
Awan

Its work. thank you!

bauroots
Guest
bauroots

Thank you guys! You saved me.

Pasquale
Guest
Pasquale

Hi, tanks again for this valuable tutorial.

Please could you explain how the service:
~Ionic4Firestore/src/app/service/crud.service.ts
KNOWs that the DB under use is the DB specified in “environment .ts”.

Thanks

Paul Pivot
Guest

Hi!
Remember first that we have initialize the the database configuration in our app.mofule.ts like AngularFireModule.initializeApp(environment.firebase)
And the path called environment has been imported on the top page

Second thing is that in our crud.service.ts we have imported the import { AngularFirestore } from ‘@angular/fire/firestore’ which know how interpret the database configuration and from it our service use the interpretation of those configurations.
I tried to explain but I don’t know if it answer to your question.

Max
Guest
Max

I’m getting this error. pls help!

ERROR Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

Kelvin
Guest
Kelvin

Great tutorial, how would we go about making a separate page for adding a student, and then another page to view the added students?

Thanks

Florian Rosnay
Guest
Florian Rosnay

Great tutorial!

By the way, I am getting the below error.
“FirebaseError: Missing or insufficient permissions”

I am newbie on Ionic, so I’d like to get your help.

stephanus
Guest
stephanus

CreateRecord() {
let record = {};
record[‘Name’] = this.studentName;
record[‘Age’] = this.studentAge;
record[‘Address’] = this.studentAddress;
this.crudService.create_NewStudent(record).then(resp => {
this.studentName = “”;
this.studentAge = undefined;
this.studentAddress = “”;
console.log(resp);
})

encounted an error with then.
Property ‘then’ does not exist on type ‘void’.