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
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
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
After the release of Ionic’s stable version 4, the major change which is introduced besides web components is related to Routing. The latest version of Ionic now supports Angular Routing. In the earlier version on Ionic, there was the concept of push and pop, where pages were pushed in a stack of pages having viewable
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
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
The ionic team launched Web Component-based Ionic’s latest version 4 to make it more compatible with major frameworks other then Angular. With the rising trend in other JS libraries like React and Vue Ionic team is constantly working to provide the Ionic platform an option for React developers.
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,
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
In this post, we will discuss how to add Modal popups in Ionic applications built in Angular framework. We’ll also learn how to pass data from the parent component to a Modal and send back data from Modals to the parent page. Modals are popup containers which are opened on top of the content. It
As the latest stable version of Ionic 4 is released, some of the previous methods to implement AdMob Free plugin are depreciated. AdMob Free plugin helps to add AdMob Google ads in Ionic Application. As we all know that we can add three types of AdMob ads in a hybrid application like Ionic for now, which
In this post, we will add Google’s Firebase service in an Ionic Application to use Firebase Authentication service. We’ll create login, registration and dashboard pages using which a user can register with email and password after login user will be redirected to the Dashboard. Firebase is a powerful cloud-based service provider for development as well
In a previous post we have already discussed the most used QR Code and Barcode Scanner Native plugin for IOnic Application, but today we will use another very popular native plugin based on ZBar library.
In this post, we will discuss a very beautiful and native-like wheel select component. These type of select boxes looks very cool and generally found in native applications.
In our previous post, we have already discussed example application to implement a YouTube video player, but some of the steps are depreciated by the release of stable version 4 of Ionic.
In this post, we will add Tabs bar navigation in Ionic Angular application using the ion-tabs component directive. In a Tabbed navigation, each tab acts like a page which is navigated by tapping on tab panels. Tab navigation proves very useful where we need to show a clean UI with some basic layout with easy
Ionic Framework provides two very powerful methods to load a large number of list items in mobile application very efficiently. First is Infinite Scroll list container which we have already discussed and the other one is Virtual Scroll list component.
In this post, we will discuss How to implement item loader component which auto-loads new items from the server or local data-object and appends to the list with a smooth animation when user scrolls to bottom. Desktop-based applications show a large set of data in tabular form with pagination which allows a user to navigate