ionic-sqlite-tutorial
ionic-sqlite-tutorial
ionic-sqlite-tutorial

Introduction

So, you want to integrate SQLite with Ionic ? Let’s start the tutorial without wasting our time.

we’re going to create a simple todo list app with ionic and sqlite, for that we need a create database. before creating a database, we need to do some prerequisites such as creating new ionic project (you can also use your old projects), and adding plugins.

Installation

Let’s create new ionic project, then add required platform and plugins.

ionic start todolist blank
cd todolistionic cordova platform add android
ionic cordova platform add iosionic cordova plugin add cordova-sqlite-storage
npm install –save @ionic-native/sqlite

Once you added plugin, we need to declare our plugin inside app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SQLite } from '@ionic-native/sqlite';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Once you have declared inside app.module.ts, we can start writing code.

Let’s create a button on header (home.html) for creating database and table & createDB function on home.ts

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic SQLite TODO
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="createDB()">Create</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
createDB(){
    this.sqlite.create({
      name: 'codesundar',
      location: 'default'
    }).then( (db:SQLiteObject) => {
      
      this.dbConnection = db;
      this.dbConnection.executeSql("CREATE TABLE IF NOT EXISTS datatable (todo VARCHAR(32))", []).then(
        (success) => { console.log("Table created")
        this.readData()
      },
        (err) => { console.log("Issue with creating table")}
      );
    }).catch( err =>{
      console.log('Error in creating DB', err)
    })
  }

Once you have created these, we can able to create a new database on your device called codesundar. then it’ll create a table called datatable

Now, we create a text input for receiving data from user & insert into database.

<ion-list>
    <ion-item>
      <ion-input type="text" [(ngModel)]="todoInput"></ion-input>
      <button ion-button item-right (click)="insert()">Add</button>
    </ion-item>
  </ion-list>
insert(){
    this.dbConnection.executeSql("INSERT INTO datatable VALUES (?)", [this.todoInput]).then(
      (success) => {
        console.log("Inserted");
        this.readData();
      },
      (err) => { console.log("Error insert") }
    )
  }

Let’s create a function to read data from table & display into user’s input

readData(){
    this.dbConnection.executeSql("SELECT * FROM datatable",[]).then( (data)=>{
      let tmp = [];
      for(let i=0; i<data.rows.length; i++){
        tmp.push(data.rows.item(i).todo)
      }
      this.todoList = tmp;

    }).catch( err => console.log(err));
  }

That’s it..

Download ionic sqlite example

You can download latest source code here..

Please login to download source code Login Here
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - YouTube