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

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.

ionic start todolist blank
cd blank
ionic cordova platform add android
ionic cordova platform add ios

Let’s add our SQLite plugin then declare into app.module.ts

ionic cordova plugin add cordova-sqlite-storage
npm install –save @ionic-native/sqlite
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..

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 - Google+