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 Framework
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 5|4 Sliding Number Counter using ng2-odometer
The numbers figures in the Ionic/ Angular application can be converted into an animated sliding counter. The ng2-odometer module adds a pinch of awesomeness to numbers by showing them in an incremental and animated way. In this post, we will discuss an awesome plugin which can be added to any reactive application including Angular Web
Ionic/ Angular Create Mock server using json-server and faker to test HTTP APIs
Today, in this post we will discuss How to create a mock server using json-server and faker library package which acts like a real server and can help to test client-server communication without any need for a real server. In a real-world application which serves dynamic content in the application is connected to a server
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 React | Adding Barcode QR Code Reader Generator App Example
In this tutorial, we will learn How to implement Barcode or QR Code reader and generator in Ionic React application using Native plugin. Using Ionic Frameworks Native plugin we can easily scan or generate QR codes. In the previous tutorial, we have already discussed its implementation in Ionic application based on Angular framework. But here
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
Scroll Progress Bar in Angular Applications
In this tutorial, we will create a scroll progress bar to indicate a user about how much of the total page is scrolled and how much is left to scroll. This scroll bar is generally shown on top of the page so that a user gets to know about the length of the page currently
Ionic 5 Add Tabs Navigation Routing in Ionic Angular Application
In this tutorial, we will add Tabs navigation in the Ionic 5 Angular application. By tapping on these tabs bar a user can navigate through different application pages by which can be switched using the Angular Routing mechanism. Tabs based navigation provides quick access to major sections of an application like search product, cart, settings,
Ionic 5 React Application Tutorial
In this article, we will learn How to create an Ionic 5 application using React and also go through the structure and get to know How actually a React application works? In starting or before Ionic’s version 4, Angular was the only choice available to build an Ionic application. But now Ionic provides multiple platforms
Ionic 5|4 Ion Segment, Sliding Tabs Examples
The ion-segment UI components display buttons in a group of a horizontal row. These button groups are switched on tap with a beautiful sliding effect in Android as well as IOS
Ionic 5 Camera Preview on Screen Floating Camera View In Page Tutorial with Example App
In this Ionic 5/4 tutorial, we are going to discuss how to add a floating camera window/ preview which can be switched for front or rear camera with multiple camera filters in Ionic Angular application using Cordova and Native Plugins. Ionic’s Camera Preview Native plugin provides an awesome floating Camera view on the component in
Ionic 4/5 Geofence Tutorial using Native Plugin
The geofence is an area defined in a geometrical shape which can be a circle or any polygon shape around a coordinate on a Geological map. In google maps, a Geofence is used to know if the current device has entered or exited from a geofence. Indication about leaving or exiting a Geofence can be
Ionic 4/5 Angular Google Maps with Places Search using @agm
In this tutorial, we will learn how to add Google Maps in an Ionic application using a powerful package @agm. The @agm package provides directive components to easily add Maps, Markers and Geometric shapes like Radius on Google Maps in Angular applications. Here we will use the power of this great package to implement Google
Ionic 5 Geolocation Native Plugin Tutorial
Ionic Geolocation Native Plugin Example Tutorial Compatible with Ionic 4 & 5 Angular Using Ionic’s Geolocation native plugin we can get current coordinates and other information like accuracy, speed, timestamp, altitude etc.
Ionic 4/5 Simple Filter Search Pipe for Lists using ng2-search-filter
A search-filter to any data list or table adds up more value to the usability of the page. In this article, we will learn how to quickly add a search filter on any type of data which can be a list or table using a special filter package ng2-search-filter for Angular projects.
