Ionic 5 Action Sheet | Angular Tutorial

In this Ionic 5/4 tutorial, we will implement the Action Sheet menu in the Ionic 5 application. The action sheet menu is open by sliding up from the bottom of the view.

Action sheet menu is added to provide some action controls to the user which pops up and gets visible which takes no space on view at normal.  An Action Sheet is a dialog that displays a set of options. It emerges on top of the app’s content and must be manually dismissed by the user before they can continue interaction with the app.

Read more

Ionic 5 Tabs without Routing using Angular Bootstrap

In this Ionic 5/4 tutorial, we’ll add the Tabs component in the Ionic Angular application page without Routing. We’ll be using the Ngx-Bootstrap package to integrate Bootstrap in the Angular project.

We have already discussed how to add Tabs in an application using Ionic Framework using the UI component. But these Tabs have their own component with Routing for each. But if we want to have a local page tabset, we can use the Bootstrap UI component to achieve this.

Read more

Add Offline, Online Video Player in Ionic 5 Angular Application using Cordova Plugin

In this Ionic 5 tutorial, we’ll add a Video Player inside the Ionic Angular application for playing multimedia files by using the Cordova and Ionic Native plugins. The Cordova plugin for Video playing allows playing videos available in the assets folder inside the application package. We can easily add functionality to immediately play a video … Read more

Ionic 4|5 Grid Tutorial by Example

Ionic UI components prove very helpful in quickly creating responsive view layouts compatible with almost all screen sizes.

But some times we may need a gid system like we rows and columns are popularly known in bootstrap for better and tight distribution of elements Horizontally and Vertically on an app page.

Ionic provides a well-trained Grid system for such tasks.

The ion-grid provides a flexbox custom layout. It is having mainly three components a grid, rows, and columns.

Read more

Ionic 4|5 Native HTTP Plugin Tutorial with Examples

In this tutorial, we will learn how to make HTTP calls using Ionic’s Native HTTP plugin.

Making Native server calls over provides advantages over traditional JavaScript HTTP calls. Native HTTP calls are made in Android and IOS based native applications. It provides more security and better calls handling features.

Some of its advantages are as follows:

Background threading: All requests are done in background thread like native applications.

Handling of HTTP code 401: This error code 401 is returned during an unauthorized access to the server which is not handled properly using JavaScript-based HTTP calls.

SSL Pinning: Pinning is used to improve the security of a service. It is used to create a secure Identity for making communications.

Read more

Ionic 5|4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Angular’s HttpClient service enables the communication between application and server by making an HTTP call to RESTfull API endpoints. In response, we get JSON data which is consumed to show meaningful content to users in client-side applications.

In this tutorial we are going to learn, how to use HttpClient service in Ionic 5 Application to make server HTTP calls with custom headers and propper Error Handling using RxJS operators. In our student application, we will implement CRUD (Create, Read, Update and Delete) operations to communicate with a Mock Server which we will build using JSON-Server NPM package.

Read more

Ionic 5|4 Keyboard Native Plugin Tutorial

In a hybrid application that runs in a WebView, we sometimes face challenges to have control on Keyboard to show or hide when the user starts to type in. To resolve this ve have Cordova plugin which controls keyboard events and provides easy methods to intentionally show or hide Keyboard on user screen.

Here we will discuss How to add Keyboard Native plugin in Ionic 4 application and how to sue Keyboards Hook events.

Read more

Ionic 5 Datepicker & Timepicker using Cordova, Native plugin Tutorial with Example

In this Ionic 5/4 tutorial, we are going to implement native-like sliding Datapicker and Timepicker using Cordova and Native plugins.

To give a more native look to the Ionic applications we can replace HTML based Date & Time picker with Android’s Native Date and Time picker in Ionic hybrid applications. Ionic’s Native Datetime Picker plugin allows adding a sliding Android Date and Time picker with many custom options and themes.

Read more

Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with a wide variety of awsome UI components which are supported for responsive and multi-device platforms. There are a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, DataTables, etc which can empower Ionic applications to the next level.

In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.

We will first install Material packages in Ionic 5 application then try some of its components. For this, we will create a new Ionic application with a blank template.

Read more

Ionic 5 In App Version Check and Updater Dialog using App Update Native Plugin

In this Ionic 5/4 tutorial, we will discuss how to update the version from the application itself without leaving going to App Stores. This will open a dialog when there is a new application version is available, then a user can directly download the updated version.

Whenever we update APK with the latest version on Playstore, it remains unpredictable if users have upgraded to the latest version or not. So there is a possibility that most of them may have not opted for auto application update in Playstore application.

So as a solution to let the user know there is an updated version available, on application start we will show a Dialog box to prompt the user that there is an update available with OK and Cancel buttons.

On ‘Ok’ user will not be redirected to PlayStore but updated APK will be downloaded from a specified path and application will be upgraded.

In Ionic Application, we will create such behavior for auto-upgrade in the application by downloading the latest APK, after the user confirms on Prompt Dialog box using Cordova and Native plugins.

Read more

Ionic 5 Image Upload in Firebase with Progress Percentage Bar Tutorial

In this Ionic 5/4 tutorial, we will integrate Firebase services and see how to upload images in Ionic application with a progress bar indicator on the Firebase database.

As we all know Firebase provides an awesome package of cloud services making the life of developers very easy. There is a wide range of tools available for next-level app development like Authentication, Testing, Analytics, Storage, Database, etc.

In this post, we will create an Ionic Application with Image Upload feature with the Progress bar. It will also list already saved of Images. This application will focus on the two most important services of Firebase

Read more

Ionic 5 Text to Speech using Cordova & Native Plugin Tutorial for Ionic Application

Ever wondered about a feature to convert text to speech? Yes, it’s possible to make you Ionic application speak the text. By using Text To Speech Cordova plugin we can easily add this feature in hybrid application.

Text to Speech Ionic Native plugin can be used to read out text in local in a beautiful female voice 😛  You can also adjust the pace of speech by adding using options available.

Here we will create a new Ionic 4 Application and demonstrate how to use Text to Speech plugin in Ionic 4 application.

Read more

Ionic 5|4 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.

Read more