Android Material Datepicker and Timepicker by Wdullaer Tutorial by Example

Android is already packed with great Calender and Timepicker to add-in application. Which most of the time fulfill basic requirements needs of a project. But some times few challenges come on ways which call for more flexibilities in Calander date pickers.

A few days back I was working on a project with Booking appointment module. There was a requirement to disable all Sundays and Saturdays in calendar datepicker dialog so that nobody will be able to select disabled dates. But there is no possibility to achieve that in traditional datepicker Calender.

Continue reading Android Material Datepicker and Timepicker by Wdullaer Tutorial by Example

How to update local Angular CLI version? in package.json file using ‘ncu’ utility

In this short tutorial, we will discuss a very common question on How to keep Angular’s local and global packages updated?

When we create a new Angular project, it lists all its packages used in a separate file called package.json, giving details in JSON format about packages and their current version installed.

Continue reading How to update local Angular CLI version? in package.json file using ‘ncu’ utility

Angular 8 | Nested Routing with Multiple RouterOutlet using loadChildren having own Router Modules Example Application

In our previous tutorial, we discussed how to implement a very basic Routing Module in an Angular 8 application. Here we will go a step further to discuss some more concepts related to Routing in Angular 8 application.

What we are going to create?

Create an Angular 8 application which will have Nested Routing up to three levels. Each level of components has its own Router Module. We will also discuss How to use lazy loading concept in Angular 8 Routing to load components on run time when they are called.

Continue reading Angular 8 | Nested Routing with Multiple RouterOutlet using loadChildren having own Router Modules Example Application

Angular 8 | What is Routing and How to add in Angular application quickly

Many modern Javascript based front-end application create Single Page Application(SPA) which loads everything once on the browser after that user can navigate between pages/ views very quickly without loading any HTML or JS content except data.

Continue reading Angular 8 | What is Routing and How to add in Angular application quickly

Angular Material 8 | Datepicker Tutorial with Examples

In this article, we will discuss how to add Datepicker using Angular Material in the project. Also, discuss some tricks to solve some basic challenges like

How to open Datepicker on Input focus?

How to Set Min and Max date in Datepicker?

Change Material Datepicker view to Year or Month by default.

Disable some of the dates or days in Datepicker calender.

Let’s start with a new Angular 8 project. Then we will install Angular Material 8 and do some configuration. If you already have a project up and running then directly jump to interesting part 🙂

Continue reading Angular Material 8 | Datepicker Tutorial with Examples

Angular Material 8/7 | Check/ Uncheck Checkbox List with Indeterminate state using MatCheckboxModule

Checking/ Unchecking a list of items with checkboxes is provided with a master checkbox to provide ease to users to control all list items. Angular Material Checkbox module MatCheckbox proves very handy in creating such lists with a number of properties.

In Material Checkbox module there are three states with Checked and Unchecked which are common, but there is also a third state called Indeterminate which is a middle of these two. Indeterminate Checkbox state indicates that some of the list items are checked but not all. It is indicated with a hyphen (-) in the checkbox.

Here we will create a list of items with a master checkbox using which a user can check to uncheck all item lists. Also if a user checks some of the items but not all, the master checkbox will show Indeterminate state which is very easy to implement.

Continue reading Angular Material 8/7 | Check/ Uncheck Checkbox List with Indeterminate state using MatCheckboxModule

Ionic 4 | Speech To Text Ionic Native Plugin tutorial for Ionic 4 Application

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 | Speech To Text Ionic Native Plugin tutorial for Ionic 4 Application

Ionic 4 | Complete SQLite CRUD Tutorial for Ionic 4 Angular Applications

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

Ionic 4 | Storage Tutorial in Ionic using Native Storage Plugin

Storage of information on a user device is very important and required in almost every application. This information saved on a user device can be of any type including user sessions, profile details, user or application settings etc.

In Ionic application, we can store such information in WebView memory which remains even if the user closes application or clears app cache from the device. There are two easy ways for storage in the Ionic application:

Continue reading Ionic 4 | Storage Tutorial in Ionic using Native Storage Plugin

Ionic 4 | Geolocation Camera clicking Pictures with Watermarked Latitude & Longitude Coordinates

In this article, we are going to create an Ionic 4 application with a GeoCamera feature. The application will take pictures from device camera then watermark them with current location coordinates with Lattitude and Longitude.

Sometimes users may need this functionality in application to watermark images with any of such information for validation purposes. In this tutorial, we will also discuss a very useful js library WatermarkJS which can be used to marker mark images with text or images.

Continue reading Ionic 4 | Geolocation Camera clicking Pictures with Watermarked Latitude & Longitude Coordinates