In this Ionic 5/4 tutorial, we will learn how to configure Status bar showing on top of the mobile screen in multiple platforms like Android, iOS, and Windows. We will use Cordova and Ionic Native plugin to change color or status bar and also change its behavior to overlap the review.
Category: Ionic 4
Ionic 5 Native In App Purchase Tutorial with Example Application
In this Ionic 5/4 tutorial, we’ll integrate In-App Purchase functionality in Android and iOS applications using Cordova and Ionic Native plugins. The In-App Purchase feature allows a user to buy from a list of available products in the Application store. Use can make purchases from a list of items available make payments and also restore
Ionic 5 Adding Vibration Ionic Example Application using Cordova & Native Plugins
Hey there, in this Ionic 5/4 tutorial, we are going to implement a native vibration feature in an Ionic application using the Cordova plugin and its Native wrapper for Angular. To use the Vibration feature, the application needs to access the hardware components of the real device. In high-level programming languages like Java, Dart, etc
Ionic 5 Progress Bar using ion-progress-bar Component Tutorial with Example App
In this Ionic 5/4 tutorial, we’ll learn how to implement a vertical progress bar UI component in Ionic Angular applications. Ionic Framework provides a wide variety of UI components so that we barely need to create our own. The progress bar UI web component is added in the Ionic application by using the ion-progress-bar directive.
Ionic 5|4 Fingerprint AIO Authentication for Android & iOS Example Application
In this Ionic 5/4 tutorial, we are going to implement Fingerprint Authentication Biometric Scanner in Ionic Angular application for Android and iOS platforms with an example application. Most of the modern Android and iOS devices come with Fingerprint sensors to secure the device and its application using biometric credentials. These biometric details can be used
Ionic 5 Ion-Slider with Cube, Fade, Flip and Coverflow effects Tutorial
In this tutorial, we’ll add Ionic Slider in Ionic 5 Angular application and implement sliding effects like Cube, Fade, Flip and Coverflow as animation transitions during the carousel navigation. The ionic framework provides an Image or content slider which is very popular due to flexible and awesome configuration ability. The ion-sliders UI component is used
Ionic 4|5 Checkbox List Required Validation using Reactive Forms
In this article, we will discuss How to validate multiple checkboxes in Ionic 4|5 application using Angular Reactive Forms. Here we will have a list of the checkbox which can be selected or unselected using a single master checkbox and also individually. We will add validation on checkbox list using Reactive form approach provided by
Ionic 5|4 Slide Side Menu Navigation Drawer Tutorial with Example Application
In this Ionic 5/4 Tutorial, we’ll learn how to add the Sidebar navigation menu in an Ionic Angular application. A sidebar navigation menu is inspired by native Android and iOS applications. Ionic based hybrid application can also add a similar type of Sidebar navigation drawer easily with the help of UI components provided by Ionic
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
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
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
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
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
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
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
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
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
Ionic 5|4 Storage Tutorial in Ionic using Native Storage Plugin
Storage of information on a user device is very important and required in almost every application. This information saved on a user device can be of any type including user sessions, profile details, user or application settings etc. In Ionic application, we can store such information in WebView memory which remains even if the user
Ionic 5 Geolocation Camera clicking Pictures with Watermarked Latitude & Longitude Coordinates
In this article, we are going to learn how to watermark images in Ionic 5/4 applications using the WatermarkJs module. using which we will create a Geolocation camera. The application will take pictures from the device camera then watermark them with current location coordinates with Lattitude and Longitude. Sometimes users may need this functionality in
Ionic 5|4 Adding Camera using Native plugin in Ionic Application
In this Ionic 5 tutorial, we’ll discuss how to use Native Camera feature in an Ionic application and get pictures returning images as Base64 URL to show user Image taken. Hybrid applications are very quick to build but sometimes it becomes challenging to achieve some features which involve access to hardware like GPS, Network, Storage,
