Ionic 3 Firebase example – CRUD Operations with Firebase Realtime Database

In this tutorial, we’re gonna look at steps to do CRUD Operations with Firebase Realtime Database in an Ionic 3 example.

Related Post: How to integrate Firebase in Ionic 3 Project with AngularFire2

I. Technology

– Ionic 3
– AngularFire2 V5

II. Overview

1. Goal

We will create an Ionic 3 Note Application that can create/read/update/delete Note:


And those actions work with Firebase Realtime Database:


2. Project Structure


node_modules folder includes @firebase and angularfire2.
firebase.credentials.ts contains configuration for Firebase Project (apiKey, authDomain, databaseURL, projectId, storageBucket…).
app.module.ts imports AngularFireModule, AngularFireDatabaseModule and provides NoteListService.
note-list.service.ts exports NoteListService class that uses AngularFireDatabase object to do CRUD operations methods: getNoteList(), addNote(), updateNote(), removeNote().
note.model.ts is the interface for Note object.
– 3 pages home, add-note, edit-note use NoteListService‘s methods to interact with Firebase DB and Ionic UI Component to display data.

III. Practice

1. Set up the Ionic 3 with Firebase Project & Install AngularFire2

Please visit this post to know step by step.

*Note: When finishing this step, you did those important jobs:
– create Firebase Project
– have firebase.credentials.ts contain Firebase Project Configuration
– install Firebase & AngularFire2 modules

Now, set Firebase Realtime Database read/write Rules for public.
Go to Firebase Console > Database > RULES tab, change rules like this:


2. Create pages

Use these command to create page for adding/editing Notes:
ionic generate page AddNote
ionic generate page EditNote

Add home.module.ts to src/pages/home:

Open src/app/app.component.ts, change:

3. App Modules

4. Data Model


5. Data Service


6. Pages
6.1 Home


6.2 Add Note


6.3 Edit Note


IV. Source Code


By JavaSampleApproach | February 15, 2018.

Related Posts

6 thoughts on “Ionic 3 Firebase example – CRUD Operations with Firebase Realtime Database”

  1. The last note is presented as last note in home page. If I would like to present the last written note first how do I do that?

    1. Hi Rolf Erikson,

      Just call reverse() method of array in home.ts:


  2. Hi,
    It does not seem to work. It started good but after adding 7 notes they were presented in the following order:
    1,3,2,5,4,7,6 where 7 was the last added note.

    Rolf Erikson

  3. I made an app based on your CRUD app. Everything worked. But I can not build an apk. I tried everything with no resultat. I even tried with your original app but with the same negative result.
    The build documentation is very difficult to understand. Would appreciate if you could add instructions how to build an Android apk file from your CRUD app.
    Rolf Erikson

Got Something To Say:

Your email address will not be published. Required fields are marked *