Ionic Firebase Realtime Database Tutorial – Todo App

Ionic Firebase Realtime database tutorial: This article, we’re going to create a simple Todo app with firebase backend with CRUD (create, read, update, delete) operation. Before we starting our project we need update rules on firebase database for accessing

Note: For testing purpose, we have added open rules, which means, we don’t added any security rule so that any one can access your database if they have credentials.

Let’s create new project & add required dependencies

ionic start todo blank
cd todo

ionic cordova platform add android
ionic cordova platform add ios

npm install --save firebase

Once we added, we need to initiate our firebase from app.component.ts

firebase.initializeApp({
    apiKey: "xxxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"
});

Working with home.html & home.ts

Creating database Reference

Since we’re performing CRUD operation from single file, we can create global firebase database reference. here I have referred todo child

firebaseDBRef: any = firebase.database().ref('/todo');

Adding New data

We’re creating a simple form for adding task with title, date, & time. when user click add task, we need to push our data into firebase realtime database using <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">this.firebaseDBRef.push(this.task)</span> with additional data such as createdAt, task completed status

addTask(){
    this.task.createdAt = new Date();
    this.task.isCompleted = false;
    this.firebaseDBRef.push(this.task);
}

Reading data

For reading data (tasks) from firebase, we’re using <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">this.firebaseDBRef.on('value', function(){ ... })</span> for continuous monitoring.

getAllTask(){
  this.firebaseDBRef.on('value', tasksnap => {
    let tmp = [];
    tasksnap.forEach( taskData => {
      tmp.push( { key: taskData.key, ...taskData.val() })
    });
    this.tasksList = tmp;
    console.log(this.tasksList);
  })
}

we have created tmp array because, tasksnap has unknown key (Which is dynamically generated). It’s hard to refer, so we created our own array with forEach() & push into taskList at end. based on taskList, we’re generating sliding on ui

<ion-item-sliding *ngFor="let task of tasksList;">
    <ion-item>
        <ion-icon style="color: green;" *ngIf="task.isCompleted" name="done-all"></ion-icon> {{task.title}}
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="secondary" (click)="updateTask(task.key)">
        <ion-icon name="done-all"></ion-icon>
      </button>
    </ion-item-options>
    <ion-item-options side="right">
      <button ion-button color="danger" (click)="deleteTask(task.key)">
        <ion-icon name="trash"></ion-icon>
      </button>
    </ion-item-options>
</ion-item-sliding>

Updating database:

When user slide from left to write, we have updateTask() where we’re updating our task completedStatus as true,

updateTask(key){
  this.firebaseDBRef.child(key).update({ isCompleted: true });
}

Deleting task from database

When user click delete button we need to remove child from firebase. we have used this.firebaseDBRef.child(key).remove() for that.

deleteTask(key){
  this.firebaseDBRef.child(key).remove()
}

Download ionic firebase realtime database example