Compatible with Ionic 4/3 and Angular 2 – 7 Web Applications
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.
In this post, we will discuss Ionic’s Reorder component. IonReorder component adds Drag and Drop feature to list items using which user can change the order of items. Such sorting or reorder functionality is found in many places like Song Ques, Todo list items etc.
Continue reading Ionic 4 | Ion Reorder List/ Drag & Drop Sorting List in Ionic 4 using ion-reorder Component
Like the native Android apps, we can show Loader with a loading animation and a message in Ionic Application using ion-loading component. Here we will implement ion-loading using Ionic’s latest CLI version 4.12.0 with Ionic 4.1 Hydrogen which is the latest stable release now.
Continue reading Ionic 4 | Adding Ion Loading Web Component in Ionic 4 Angular Application
In this post, we will discuss Scroll Events available in Ionic 4 IonContent using which we can scroll Ionic page content to Top, Bottom or to any point providing X Y axis.
Continue reading Ionic 4 | How to Scroll to Top / Bottom using Ion Content Scroll Events
Ionic team release the latest version Ionic 4.1 Hydrogen, in which they have introduced Checkbox Indeterminate state. Indeterminate state 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.
Continue reading Ionic 4 | How to Select All/ Unselect All Checkboxes with Ideterminate in Ionic 4
After the big release of Ionic 4.0, the team has come up with another update Ionic 4.1 named Hydrogen cool 😛 In this update, they have fixed some bugs from the previous version and also introduced some new features.
New features seem like a cherry on top as these are mostly related to UI point to view. Here is the list of four features( with working examples ) added in Ionic 4.1 (Hydrogen)
– Intermediate Checkbox
– Skeleton Text Update
– CSS Display Utilities
– Select Component with compareWith
Gotta catch ’em all!
Continue reading Ionic 4.1 Hydrogen New Features | How to Implement? Example Tutorial
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 which 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.
Continue reading Ionic 4 | Adding Toasts in Ionic 4 Application using UI Components without Plugins
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 application to a specific style may need deep style management of each and every UI component. The ionic framework is really a great platform which makes customizations and styling of Ionic web components very easy.
Continue reading Ionic 3/4 How to Change CSS Custom Properties of UI Components
Ionic 4 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 4 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.
Continue reading Ionic 4 | Create Simple Login and Prevent Page Access using Angular Guards