In this post we will discuss on How to Add a Modal in Ionic 3 Application with Latest Ionic CLI (v4.12.0) for Adding Modals in Ionic 4 App check this post
Ionic Framework
Ionic/Angular – Scratch Cards like Google Pay in Ionic Application using Javascript Liberary
These days you may have seen many Payment applications like Google pay, Paytm, PhonePe, etc having scratch cards where users can scratch like real one to reveal offers or points.
In Ionic as well we can create similar Scratch Cards effect, loved by users as it involves user interactions and a touch of suspense. These Scratch cards are very much popular and seen in many applications.
Ionic 5 Ion Reorder & Sorting List using ion-reorder UI Component
In this Ionic 5/4 tutorial, we’ll discuss how to add a Sortable list with Drag and Drop feature using the Ion Reorder UI component in Ionic Angular application.
An IonReorder component adds Drag and Drop feature to list items using which user can change the order of items. We can apply such sorting or reorder functionality in the real-world applications having a queue of song playlist, the priority of todo items, etc.
The sortable list is implemented by adding the ion-reorder & ion-reorder-group UI components on a list of items. We can enable or disable this feature, customize the handle icons on the sortable list.
Ionic 5 Add Ion Loading component in Ionic application
In this Ionic 5/4 tutorial, we’ll learn how to add loader with a message and an animating spinner in an Ionic application using the ion-loading web component. Like native applications, we can show a Loader with a loading animation and a message in Ionic Application using the ion-loading component. Showing a loader in an application … Read more
Ionic 5|4 How to Scroll to Top ,Bottom, to Element with Ion Content Scroll Events
In this Ionic tutorial, we’ll discuss Scroll events and methods available on the ion-content component in the Ionic Framework. These events can be used to Scroll the page to Bottom, Top or to some other coordinate on the screen using the X or Y points.
Here we will also explore how to enable Scroll events then use Scroll event callbacks and methods to scroll on the screen in the application page.
We’ll also discuss How to smoothly scroll to a specific element within the page using offsetTop property of the element.
Ionic 5|4 How to Select/ Unselect All Checkboxes with Indeterminate
Checkbox UI form control provides basic states like checked, unchecked and disabled. But there is one more state known as Indeterminate state.
The indeterminate state usually depicts that only partial checkboxes are checked in the list. It is mostly used in Master checkbox which indicates the child checkbox list.
Indeterminate checkbox state indicates that not all but some of the checkboxes are checked.
Ionic 5 Showing Toasts in Ionic Application with Customization Tutorial
In this Ionic 5/4 tutorial, we’ll discuss how to implement toasts UI components in Ionic Angular application and customize it using CSS styles.
In most of the applications these days whether they are mobile or web-based show information notifications in the form of toasts. Toasts are used in application to notify users are operational feedbacks like an error message, success alert, or update information notification.
In the Ionic application as well we have beautiful Toast UI components that can be used without any plugin. In this post, we will add Ionic Toasts in few steps and also discuss some of the basic methods like Creating, Positioning, and Dismiss toasts.
Ionic 5|4 How to Change CSS Custom Properties of UI Components
The ionic framework provides very beautiful UI Components like custom buttons, select boxes, loaders, alerts, toasts, checkboxes & radio, etc.
These are fully customizable with many options like for example if we take a button, we can easily change its color, shape, fill style with various available options given on respective UI component docs like for button it here
But for custom branding and modification of an application to a specific style may need deep style management of each and every UI component. The ionic framework is really a great platform that makes customizations and styling of Ionic web components very easy.
Ionic 5|4 Login & Registration Form using Guard Working UI Example Application
Ionic 4/5 is using Angular Routing, so it becomes very easy to add authentication in an Ionic application using Auth Guards.
In this post, we will create a simple login application to quickly demonstrate how we can implement Angular Guards in Ionic to prevent access to pages if the user is not logged in. This is very common and required by most of the real-world application where we don’t want some pages to be accessed without proper authentication.
Ionic Toast Messages using ToastController in Ionic 5 Applications
In this Ionic 5/4 tutorial, we’ll discuss How to show Toasts notification messages in Ionic Angular Application. Ionic provides ToastController using which we can show Native looking toast messages in our Ionic hybrid application.
Toasts are basically messages which are used to show some sort of information to users like success or error messages with action buttons using which we can ask a user to perform some action by tapping the toast. These are similar to Native toasts shown in Android or IOS applications.
Ionic 5|4 Turn on Device GPS Without Leaving Application using Native Plugin
In this Ionic 5/4 tutorial, we’ll learn how to make a user enable the Geolocation service without leaving or minimizing the application. We’ll use a Native plugin to open a dialog from which a user can tap to switch on the Geolocation service.
In Ionic Application which is using Geolocation get device location coordinates like latitude and longitude may need more accuracy. Device Geolocation service can location coordinates using the network, WiFi Bluetooth but for more accurate location device GPS option must be turned on, which can provide Location accuracy up to 10m which proves quite good for real-time and delivery applications.
In this post, we will discuss How to Turn on Device GPS option from Ionic Application itself, so that the user does not need to leave application. We will use Cordova and Ionic Native plugin, which will prompt the user to turn on GPS.
Ionic 4 Adding Google Analytics Example – Using Ionic Native Plugin
Google Analytic is very popular among Web applications to track various parameters like traffic analysis based on demography, event activity, content-based analysis etc. We have already discussed How to integrate Google Analytics in Ionic 3 application. Google Analytic provides use dashboards to view real-time traffic on Web Applications.
In this post, we will discuss on How we can integrate Google Analytics in Hybrid applications based on Ionic’s latest version 4. As hybrid application based on web view so it is very easy to integrate with a few steps.
Ionic 5|4 CRUD Operations Using Firebase with Firestore NoSQL Database Tutorial in Ionic Angular Application
In this Ionic 5 tutorial, we’ll integrate Google’s Firebase and use NoSQL database service Firestore to perform CRUD operation by creating a Student Resister application.
The Firestore is a cloud-based Realtime NoSQL database service provided by Firebase. We’ll integrate Firestore services in an Ionic application and build a Student Register application and perform CRUD (Create, Read, Update and Delete) operations.
In a traditional SQL based Relational Database Management system works with Tables and Rows, but in a NoSQL database like Firestore, we work with Collections and Documents. In a NoSQL, database information is saved and fetched in the form of JSON objects.
Ionic 5|4 Implement Image Picker in Ionic Application using Cordova and Native Plugin
In this Ionic 5/4 tutorial, we’ll implement Image picker functionality in Ionic Angular application by installing Cordova and Native plugins.
In Ionic applications, we may have support to select multimedia data by a user like images, for that we can show an Image Picker feature for easy selection of Images. In this post, we will discuss How to Add image Picker Ionic native Plugin. After adding this Cordova and native plugin you can easily choose images and show selected images on the page.