My Ionic version is 3.7
Install sqlite by running inside app directory: ionic cordova plugin add cordova-sqlite-storage
i started with blank template
ionic start demoapp01 blank
Add a provider
ionic add provider data
My home.html is
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button full (click)="addItem()">
insert
</button>
</ion-content>
my provider data.ts is
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { SQLite, SQLiteObject} from '@ionic-native/sqlite'
/*
Generated class for the DataProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class DataProvider {
databaseCreated: Promise<void>;
constructor(public platform: Platform, public sqlite: SQLite) {
console.log('datapovider');
this.databaseCreated = this.create();
}
public create(): Promise<void> {
return this.platform.ready().then(() => {
this.sqlite.create({
name: 'teacherApp.db',
location: 'default'
})
.then((db: SQLiteObject) => {
db.executeSql('create table if not exists lists(id INTEGER PRIMARY KEY AUTOINCREMENT, listname TEXT)', {})
.then(() => console.log('Created / Opened SQL'))
.catch(e => console.log(e));
})
.catch(e => console.log(e));
})
}
public insertList(listname: string){
this.databaseCreated.then(() => {
this.sqlite.create({
name: 'teacherApp.db',
location: 'default'
})
.then((db: SQLiteObject) => {
db.executeSql('INSERT INTO lists(listname) VALUES(listname)', {})
.then(() => console.log('Executed SQL'))
})
})
}
public getAll() {
this.databaseCreated.then(() => {
this.sqlite.create({
name: 'teacherApp.db',
location: 'default'
})
.then((db: SQLiteObject) => {
db.executeSql('SELECT * FROM lists', {})
.then(() => console.log('Executed SQL'))
})
})
}
}
My home.ts is
import { Component } from '@angular/core';
import { SQLite, SQLiteObject} from '@ionic-native/sqlite';
import { NavController,Platform } from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
dp : DataProvider;
constructor(public navCtrl: NavController,platform: Platform) {
console.log('home constructor');
}
public addItem(){
this.dp.insertList("daniss");
}
}
WHile running using ionic serve the app home page os diaplyed.
When clcking the button it is giving error
Runtime Error
Cannot read property ‘insertList’ of undefined