Ionic SQLite Tutorial

ionic-sqlite-tutorial-with-example

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 to-do 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 a new ionic project (you can also use your old projects) and adding plugins.

Installation

Let's create a new ionic project, then add the 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 the 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 the latest source code for ionic SQLite tutorial here.