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 grokonez | February 15, 2018.

Last updated on November 29, 2018.

Related Posts

39 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

    1. For Android, Install Android Studio

      then from cmd/terminal run
      >ionic cordova build android

      plug in your device or simulate one
      In android studio, simply open existing project and navigate to the platforms/android directory in your ionic project
      then you can install or run the application on you smart phone.

  4. Hello,

    Any help will be appreciated. Using Ionic 3, AngularFire2, I downloaded this code as it is and ran the script. It add the item in firebase no problem however it does not list it properly. Following is the error

    polyfills.js:3 Uncaught TypeError: Object(…) is not a function
    at SwitchMapSubscriber.project (changes.js:7)
    at SwitchMapSubscriber._next (switchMap.js:90)
    at (Subscriber.js:89)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:125)
    at (Subscriber.js:89)
    at (Subject.js:55)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:125)
    at (Subscriber.js:89)
    at Notification.observe (Notification.js:32)
    at AsyncAction.DelaySubscriber.dispatch (delay.js:88)

    Please any help willbe really appreciated

    1. First you have to update rxjs with this command npm install rxjs@6 rxjs-compat@6 --save.
      Before that you need to import the map operator:
      import 'rxjs/add/operator/map'
      Or more generally:
      import 'rxjs/Rx';
      And ready, app it’s working.

        1. Never mind, just a problem with the database reference (in my database I have ‘items’ instead of ‘note-list’). Updating rxjs and using one of the imports works just fine.

  5. private noteListRef = this.db.list(‘note-list’);

    How to let each user that logs in to my app, can create their own notes. How to apply userid in this application ?

  6. Hi,
    i get thi error :
    ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘snapshotChanges’ of undefined
    TypeError: Cannot read property ‘snapshotChanges’ of undefined
    at new HomePage (home.ts:20)
    at createClass (core.js:12491)
    at createDirectiveInstance (core.js:12326)
    at createViewNodes (core.js:13784)
    at createRootView (core.js:13673)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateRootView [as createRootView] (core.js:14381)
    at ComponentFactory_.create (core.js:11278)
    at ComponentFactoryBoundToModule.create (core.js:4030)
    at NavControllerBase._viewInit (nav-controller-base.js:441)
    at new HomePage (home.ts:20)
    at createClass (core.js:12491)
    at createDirectiveInstance (core.js:12326)
    at createViewNodes (core.js:13784)
    at createRootView (core.js:13673)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateRootView [as createRootView] (core.js:14381)
    at ComponentFactory_.create (core.js:11278)
    at ComponentFactoryBoundToModule.create (core.js:4030)
    at NavControllerBase._viewInit (nav-controller-base.js:441)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:223)
    at NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at (polyfills.js:3)
    at polyfills.js:3
    Thank you!

  7. Please help me. I have this error.

    “Uncaught (in promise): Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.\nNgForOf.prototype.ngOnChanges@http://localhost:8100/build/vendor.js:46669:27\ncheckAndUpdateDirectiveInline@http://localhost:8100/build/vendor.js:13092:9\ncheckAndUpdateNodeInline@http://localhost:8100/build/vendor.js:14620:20\ncheckAndUpdateNode@http://localhost:8100/build/vendor.js:14563:16\ndebugCheckAndUpdateNode@http://localhost:8100/build/vendor.js:15456:55\ndebugCheckDirectivesFn@http://localhost:8100/build/vendor.js:15397:13\nView_ListeAdministrateursPage_0/<@ng:///AppModule/ListeAdministrateursPage.ngfactory.js:134:5\ndebugUpdateDirectives@http://localhost:8100/build/vendor.js:15382:12\ncheckAndUpdateView@http://localhost:8100/build/vendor.js:14529:5\ncallViewAction@http://localhost:8100/build/vendor.js:14880:21\nexecComponentViewsAction@http://localhost:8100/build/vendor.js:14812:13\ncheckAndUpdateView@http://localhost:8100/build/vendor.js:14535:5\ncallWithDebugContext@http://localhost:8100/build/vendor.js:15783:39\ndebugCheckAndUpdateView@http://localhost:8100/build/vendor.js:15320:12\nViewRef_.prototype.detectChanges@http://localhost:8100/build/vendor.js:12304:13\nNavControllerBase.prototype._viewAttachToDOM@http://localhost:8100/build/vendor.js:53930:9\nNavControllerBase.prototype._transition@http://localhost:8100/build/vendor.js:54010:13\nNavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:53731:40\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974\nonInvoke@http://localhost:8100/build/vendor.js:5445:24\nF</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901\nF</c</\nf/<@http://localhost:8100/build/polyfills.js:3:20240\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649\nonInvokeTask@http://localhost:8100/build/vendor.js:5436:24\nF</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562\nF</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815\no@http://localhost:8100/build/polyfills.js:3:7887\nF</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823\np@http://localhost:8100/build/polyfills.js:2:27646\nv@http://localhost:8100/build/polyfills.js:2:27893\n"

  8. Is it necessary to update rxjs with this command : npm install rxjs@6 rxjs-compat@6 –save ?

    I have :
    “@ionic/storage”: “2.1.3”,
    “angularfire2”: “^5.0.0-rc.10”,
    “cordova-sqlite-storage”: “^2.3.2”,
    “firebase”: “^5.0.4”,
    “ionic-angular”: “3.9.2”,
    “rxjs”: “5.5.11”,

    addNote work correctly by getNoteList() don’t work.

    Please help me.

    1. Thanks @Rodrigo, your post helped to solve this issue
      “First you have to update rxjs with this command npm install rxjs@6 rxjs-compat@6 –save.
      Before that you need to import the map operator:
      import ‘rxjs/add/operator/map’
      Or more generally:
      import ‘rxjs/Rx’;
      And ready, app it’s working.”

      My case:
      Before “rxjs”: “5.5.11”,
      Run npm install rxjs@6 rxjs-compat@6 –save” from

      and now “rxjs”: “^6.2.1” and “rxjs-compat”: “^6.2.1”

      Following this example:

      Applied these changes after the update:

      It works for me 🙂

  9. Augustin!

    You can try this! I tested a similar example on this tutorial too Youtube

    1. Hello Susy. Thank you for your answer. I will follow the video to see if it works with me. But before I would like to ask if the import of IonicPage is necessary because I don’t use it. Isn’t by chance that I do not care that my code does not work? Once again thank you.

    2. This didn’t work for me anymore, the .map is creating an error, after some online looking i found out that the ‘.’ has to be removed so that makes

  10. First of all, really appreciate your examples…this has helped me a ton! Was wondering if you have anything available to covers uploading posts with images to firebase? Been struggling with images for a while now.

    Any help is greatly appreciated!

  11. From me also a big compliment for this tutorial. Has anyone already tried the notes to search? Otherwise, maybe someone has an idea to find notes with the Ionic Searchbar?

  12. greeting, first of all . thanks for making this informative tutorial .

    i keep getting this error of Cannot read property ‘set’ of undefined.
    Using the console i check in they pin point me to this line
    here is the console error code

    EditNotePage.html:27 ERROR TypeError: Cannot read property ‘set’ of undefined
    at isFirebaseRef (utils.js:11)
    at checkOperationCases (utils.js:21)
    at Object.dataOperation [as update] (data-operation.js:4)
    at NoteListService.webpackJsonp.150.NoteListService.updateNote (note-list.service.ts:21)
    at EditNotePage.webpackJsonp.488.EditNotePage.updateNote (edit-note.ts:32)
    at Object.eval [as handleEvent] (EditNotePage.html:27)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    View_EditNotePage_0 @ EditNotePage.html:27

    If i click on the delete button in a specific note, it will delete all the note from firebase . how do i do it so that it will only delete the note that i am in
    pls help.

  13. hi. first of all.. great tutorial. it really help me alot. but i have problem where it state that “undefined title” in edit-note.html -> [(ngModel)]=”note.title” im not sure how to solve this. ive tried.. adding is success edit and delete are not success

  14. hi
    i get this ERROR
    please help me!!

    Error: Uncaught (in promise): TypeError: Unable to get property ‘title’ of undefined or null reference
    TypeError: Unable to get property ‘title’ of undefined or null reference
    at Anonymous function (Function code:101:5)
    at debugUpdateDirectives (http://localhost:8100/build/vendor.js:15382:5)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14529:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14880:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14812:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:14535:5)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15783:9)
    at debugCheckAndUpdateView (http://localhost:8100/build/vendor.js:15320:5)
    at ViewRef_.prototype.detectChanges (http://localhost:8100/build/vendor.js:12304:13)
    at NavControllerBase.prototype._viewAttachToDOM (http://localhost:8100/build/vendor.js:53181:9)
    at c (http://localhost:8100/build/polyfills.js:3:19746)
    at Anonymous function (http://localhost:8100/build/polyfills.js:3:19174)
    at NavControllerBase.prototype._fireError (http://localhost:8100/build/vendor.js:52944:13)
    at NavControllerBase.prototype._failed (http://localhost:8100/build/vendor.js:52937:9)
    at Anonymous function (http://localhost:8100/build/vendor.js:52984:46)
    at t.prototype.invoke (http://localhost:8100/build/polyfills.js:3:14879)
    at onInvoke (http://localhost:8100/build/vendor.js:5445:17)
    at t.prototype.invoke (http://localhost:8100/build/polyfills.js:3:14879)
    at (http://localhost:8100/build/polyfills.js:3:10117)
    at Anonymous function (http://localhost:8100/build/polyfills.js:3:20233)
    Ionic Framework: 3.9.2
    Ionic App Scripts: 3.2.1

  15. I tried the code, and I keep getting this error. Can you please help me. Thank you.

    Typescript Error
    Generic type ‘Observable’ requires 1 type argument(s).
    noteList: Observable

  16. why note cannot detect? have error

Got Something To Say:

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