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 Grid system for such tasks.
The ion-grid provides a flexbox custom layout. It is having mainly three components a grid, rows, and columns. Continue reading Ionic 4 Grid Tutorial by Example
In this tutorial, we will learn how to make HTTP calls using Ionic’s Native HTTP plugin.
Some of its advantages are as follows:
Background threading: All requests are done in background thread like native applications.
SSL Pinning: Pinning is used to improve the security of a service. It is used to create a secure Identity for making communications. Continue reading Ionic 4 | Native HTTP Plugin Tutorial with Example
Angular’s HttpClient service enables 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 4 Application to make server HTTP calls with custom headers and propper Error Handling using RxJS operators. In our student application, we will implement CRUD (Create, Read, Update and Delete) operations to communicate with a Mock Server which we will build using JSON-Server NPM package. Continue reading Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API
In a hybrid application which 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 Keyboards events and provides easy methods to intentionally show or hide Keyboard on user screen.
Here we will discuss How to add Keyboard Native plugin in Ionic 4 application and how to sue Keyboards Hook events.
Continue reading Ionic 4 | Keyboard Native Plugin Tutorial
To give a more native look to the Ionic application we can replace HTML based Datepicker with Android’s Native Date and Time picker in Ionic hybrid applications. Ionic’s Native Datetime Picker plugin allows adding Android Date and Time picker with many custom options and themes. Continue reading Ionic 4 Native | Date & Time Picker using Native DatePicker plugin Tutorial by Example
Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with We Components which are supported for responsive and multi-device platforms. There is a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, Data tables, etc which can empower Ionic applications to the next level.
In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.
We will first install Material packages in Ionic 4 application then try some of its components. For this, we will create a new Ionic 4 application with a blank template. Continue reading Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App
Whenever we update APK with the latest version on Playstore, it remains unpredictable if users have upgraded to the latest version or not. So there is a possibility that most of them may have not opted for auto application update in Playstore application.
So as a solution to let the user know there is an updated version available, on application start we will show a Dialog box to prompt the user that there is an update available with OK and Cancel buttons.
Continue reading Ionic 4 | In App Version Check and Updater Dialog using App Update Native Plugin
As we all know Firebase provides an awesome package of cloud services making the life of developers very easy. There is a wide range of tools available for next-level app development like Authentication, Testing, Analytics, Storage, Database, etc.
In this post, we will create an Ionic Application with Image Upload feature with Progress bar. It will also list already saved of Images. This application will focus on the two most important services of Firebase
Continue reading Ionic 4 | Image Upload in Firebase with progress bar Tutorial
Ever wondered about a feature to convert text to speech? Yes, it’s possible to make you Ionic application speak the text. By using Text To Speech Cordova plugin we can easily add this feature in hybrid application.
Text to Speech Ionic Native plugin can be used to read out text in local in a beautiful female voice 😛 You can also adjust the pace of speech by adding using options available.
Here we will create a new Ionic 4 Application and demonstrate how to use Text to Speech plugin in Ionic 4 application.
Continue reading Ionic 4 | Text to Speech Ionic Native Plugin tutorial for Ionic 4 Application
Storage of data on a user device is an important requirement for mobile applications. For a hybrid application like Ionic, we have WebViews where we can access browser storage available in the form of Local or Session storage. But these have limitations in terms of availability of memory which can store only 10mb of data.
In Ionic we have a Native Plugin SQLite which can be easily integrated with the application and have no limitation on storage of data, it depends on device memory.
SQLite is SQL based database where we can easily create databases, tables, and store or retrieve complex data from it by running SQL queries.
Continue reading Ionic 4 | Complete SQLite CRUD Tutorial for Ionic 4 Angular Applications