Ionic 5 SQLite Database Quick Example | CRUD Operations

In this article, we will implement SQLite Database in Ionic 5 Angular based application by using SQLite Native plugin.

SQLite is used to set up a local device database that can be used to store data using SQL queries. We can easily do basic CRUD operations on data like Create, Retrieve, Update or Delete Data table rows.

It is a storage database that is available for native devices like an Android phone, so we can only test it on a real device.

SQLite Database is a preferred mode of storage on local devices due to some cool features:

No limitations on data storage like we have in local or session storage.

Complex logic can be implemented on data stored using SQL queries.

– Remote data can be saved on local devices for offline access.

– Data can be saved locally if no network is accessible then fed to a remote server when the network connects.

Let’s start the implementation steps!

Here we will create a simple one page Ionic 5 Application using Angular with basic SQLite operations:

1) Create Database
2) Create Table
3) Read Table Rows
4) Create/ Insert New Rows
5) Delete Table Rows
6) Edit/ Update Rows

Create a new Ionic Application

Using the latest Ionic CLI tool we will create an Ionic application using Angular with a blank template.

Run following NPM command to create the application:

 

Install & Configure SQLite Plugin

Run following NPM commands to install the SQLite Cordova and Native plugin:

 

Now open the app.module.ts file to import the SQLite class then add in the providers array:

SQLite Implementation

To start using SQLite in the Home component class, we will add a few variables to keep SQLiteObject, Database name, Table name and few other:

 

Create an SQLite Database

To create a Database we can add login in the App component, but here to keep it simple we will use the platform.ready() hook which is triggered when device is ready.

 

In the callback call the createDB() method to create a new Database if not created yet

Update Class with Insert, Read, Update and Delete Methods

To execute CRUD operation we can simply execute SQL queries by using the executeSql method available in the SQLiteObject class.

The complete HomePage class will look like this:

Update Home Page Template

Let’s update the Home Page template HTML to show buttons to Create Database, Create Table, Get Table’s existing rows. Also, we will add an Input to enter the value to the database table.

In the Ionic Grid, we will list out existing Table rows and update it when a new row is added or updated.

Open the home.page.html file and replace with following code:

That’s it now you have a working application with its own SQLite Database where you can perform CRUD operations and do any type of operation using SQL queries.

Just run your application inĀ  a real Native Android device by connecting it to your computer via USB cable and run following command:

$ ionic cordova run android -l

Conclusion: Ionic SQLite Native provides a good option for storing data in local databases in the device itself. Moreover managing the database becomes easy using SQL based queries to do any logical task. The support and community of SQL are very large to answer any tricky challenge.

 

 

Leave a comment

Your email address will not be published. Required fields are marked *