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:

ionic-firebase-crud-goal

And those actions work with Firebase Realtime Database:

ionic-firebase-crud-goal-console

2. Project Structure

ionic-firebase-crud-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:

ionic-integrate-firebase-database-rules

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

src/model/note

5. Data Service

src/service

6. Pages
6.1 Home

src/pages/home

6.2 Add Note

src/pages/add-note

6.3 Edit Note

src/pages/edit-note

IV. Source Code

JSANote-Ionic3-FirebaseDB-CRUD

By JavaSampleApproach | February 15, 2018.

Related Posts


23 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:

      Regards,
      JSA.

  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.

    Regards
    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.
    Regards
    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 SwitchMapSubscriber.Subscriber.next (Subscriber.js:89)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:125)
    at RefCountSubscriber.Subscriber.next (Subscriber.js:89)
    at Subject.next (Subject.js:55)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:125)
    at ConnectableSubscriber.Subscriber.next (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.

  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 r.run (polyfills.js:3)
    at polyfills.js:3
    Why?
    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</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124\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 https://auth0.com/blog/whats-new-in-rxjs-6/

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

      Following this example:
      home.ts

      Applied these changes after the update:
      home.ts

      It works for me 🙂

  9. Augustin!

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

Got Something To Say:

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

*