Let’s Code Better

  • Ionic 5 Get Background Geolocation of Device Example Application

    In this Ionic 5/4 tutorial, we’ll learn How to fetch Geolocation in Ionic application when the application is moved to the background or minimized using Cordova and Native plugins. Applications these days provide features to get locations like we implemented device location plugin to get location coordinates when a user clicks a button, But what…

    Read more: Ionic 5 Get Background Geolocation of Device Example Application
  • Ionic 4 How to Call a Number Directly from Ionic 4 Native Application

    To make it more convenient, we can add a feature to make calls directly through the application. In this post, we will create an Ionic 4 application, in which we can directly call a number by using Cordova and Ionic Native plugins.

    Read more: Ionic 4 How to Call a Number Directly from Ionic 4 Native Application
  • YouTube DATA V3 API Sample API GET URL

    Here I am going to share a sample of YouTube Data V3 API Sample get URL. Google provides this YouTube Data API to fetch information about YouTube, this workes with a KEY which you need to add in GET URL to make it fetch requested Information.

    Read more: YouTube DATA V3 API Sample API GET URL
  • Ionic 3 YouTube Video Player Embed Example – Using Native Plugin

    In this tutorial, we will create an Ionic 3/4 application to demonstrate How to Add YouTube Video Player. We will Install the Cordova plugin and Ionic Native Wrapper to add functionality in Ionic 3/4 Application by using which YouTube’s Player can be opened to Play any YouTube video right from the Ionic application itself. To…

    Read more: Ionic 3 YouTube Video Player Embed Example – Using Native Plugin
  • How to use *ngSwitch in Angular 2+ Versions

    Switch case is very popular among many languages weather on client side or server side. A switch provides flexibility to validate a section according to expressions. In this post, we will discuss the implementation of Switch cases in Angular 7 latest version.

    Read more: How to use *ngSwitch in Angular 2+ Versions
  • Ionic 5|4 Geolocation, Native Geocoder Example Pincode Application to get Coordinates and Address

    In this Ionic 5 tutorial, we’ll discuss how to add Geolocation functionality to get current location in the form of coordinates like latitude, longitude and accuracy of the device. Also, we’ll add the Geocoder plugin in the application to convert coordinates into a readable physical address. Fetching location of a device plays a great role…

    Read more: Ionic 5|4 Geolocation, Native Geocoder Example Pincode Application to get Coordinates and Address
  • Ionic 3 Geolocation and Geocoder Example – Device Latitude, Longitude and Address

    UPDATED(26/03/19) for latest CLI 4.12.0 In this post, we will implement Geolocation and Geocoder plugins in Ionic 3 application. Using Geolocation service we can get Lattitude, Longitude, Accuracy of location, Speed, Altitude etc of the device. After that Latitude and Longitude can be used to get Addresses available on these coordinates. To fetch address from…

    Read more: Ionic 3 Geolocation and Geocoder Example – Device Latitude, Longitude and Address
  • How I resolved! “Your requested URL has been blocked as per the directions received from Department of Telecommunications, Government of India. Please contact administrator for more information.”

    Today morning when I tried to open the Ionic Frameworks website, a strange message was showing up on screen “Your requested URL has been blocked as per the directions received from Department of Telecommunications, Government of India. Please contact administrator for more information.”

    Read more: How I resolved! “Your requested URL has been blocked as per the directions received from Department of Telecommunications, Government of India. Please contact administrator for more information.”
  • Use Native Device Camera in Ionic 3 Application

    In this tutorial, we will create an Ionic 3 application to demonstrate the usage of Native Camera feature with the help of Cordova and Ionic Native Plugins wrappers. Check: Ionic 4 Camera Tutorial Example

    Read more: Use Native Device Camera in Ionic 3 Application
  • Ionic 5|4 Add Barcode/ QR Code Scanner/ Encoder Generator using Native Plugin

    In this tutorial, we will implement a Barcode or QR Scanner / Encoder plugin in an Ionic application. Barcodes and QR codes are widely used for multiple purposes like to add a link where a user doesn’t need to type the whole URL it can be easily scanned from a QR code. Barcodes can also…

    Read more: Ionic 5|4 Add Barcode/ QR Code Scanner/ Encoder Generator using Native Plugin
  • Ionic 3 AdMob Plus Tutorial – Update of AdMob Free

    AdMob Plus is a Cordova plugin to use Google AdMob in hybrid applications like Ionic. AdMob Plus is developed by same developer Ratson who previously developed and maintained AdMob Free plugin. Ratson wanted to create an AdMob plugin with no ad sharing, as most of the plugin do, they take a part of the revenue…

    Read more: Ionic 3 AdMob Plus Tutorial – Update of AdMob Free
  • Angular 9|8|7 Drag and Drop Across Multi Lists in Angular Material

    In this Angular 9 tutorial, we’ll discuss how to implement drag and drop functionality using Angular Material library components. In the drag and drop lists, items can be dropped across multiple lists or in the same list. In the Angular Material version 7, two major updates were introduced, Virtual Scroll, and Drag and Drop. Both…

    Read more: Angular 9|8|7 Drag and Drop Across Multi Lists in Angular Material
  • AngularJS – Image Crop Directive with Resize in Angular 1.x

    Many web application has a feature to upload media including images, this can be for any purpose like Uploading some document, uploading screenshots, Updating profile images. To provide a user-friendly interface for uploading we can add an Image crop tool on the client side so that user can crop the desired portion of Images to…

    Read more: AngularJS – Image Crop Directive with Resize in Angular 1.x
  • CSS & jQuery – How to Disable Text Selection Highlighting?

    In some cases, we don’t want others to copy selected text. To prevent text on a webpage we can opt for CSS, Pure JavaScript or jQuery solution. We will discuss one by one.

    Read more: CSS & jQuery – How to Disable Text Selection Highlighting?
  • jQuery – Top 5 Image Slider/ Carousel Responsive

    Image Sliders plays a key role in beautifying user interface by placing multiple images at a single or limited area. Here we will discuss Top 5 Image Sliders/ Carousel Available for free. We will also discuss the pros and cons of each option available.

    Read more: jQuery – Top 5 Image Slider/ Carousel Responsive
  • How to Test Touch Behavior in Google Chrome

    Ever wondered to test touch events on Web Browser itself? Yes! it’s possible to emulate touch events and behavior in chrome browser. Many Ionic developers sometimes need to test touch events, then the only option left is to run the application in the real device. Here we will discuss How to Enable Touch sensors in…

    Read more: How to Test Touch Behavior in Google Chrome
  • Ionic 3 Swipeable/ Draggable Tabs Pages Application in Ionic 3

    Like we see in popular applications like Instagram, we usually have different views which can be easily swiped or dragged right to left to change the view. Today we will implement same user interface having swipeable pages instead of tradition Tap to Change scenario.

    Read more: Ionic 3 Swipeable/ Draggable Tabs Pages Application in Ionic 3
  • Ionic 3 Resolve! Failed to install ‘cordova-plugin-admob-free’: Error: Variable(s) missing: ADMOB_APP_ID

    Here we will discuss an issue faced during the platform build of Ionic 3 application, having an AdMob Free plugin. You can see that error below, this issue comes when we don’t add AdMob app id in an application using AdMob Free Ionic 3 native Plugin.

    Read more: Ionic 3 Resolve! Failed to install ‘cordova-plugin-admob-free’: Error: Variable(s) missing: ADMOB_APP_ID
  • HTML5 – How to Disable Spell Check & Remove Red Line Below Text?

    It is good to know about spell mistakes realtime as we type in case of global languages like English, but when we type in other regional languages auto spell check comes to the rescue even if not required.

    Read more: HTML5 – How to Disable Spell Check & Remove Red Line Below Text?
  • Owl Carousel 2 – Customize Navigation Next Prev Arrows

    Owl Carousel 2 is a very popular and easy to implement Image and HTML slider. This is the most loved and favourable image slider available. Most developers prefer to use this slider due to many reasons like responsiveness, touch device support and also support older browsers. It is a full package of many useful options…

    Read more: Owl Carousel 2 – Customize Navigation Next Prev Arrows
  • Ionic 3 Torch /Flashlight Tutorial – Using Backlight Plugin Ionic Native 3.x

    In this post, we will create Flashlight/ Torch app in Ionic 3 version using Ionic Native plugin Flashlight, the application will have a switch button to on/ off camera flashlight which can be used as a torch.

    Read more: Ionic 3 Torch /Flashlight Tutorial – Using Backlight Plugin Ionic Native 3.x
  • Ionic 5 Pull/ Swipe Down to Refresh on Ionic Page Tutorial with Example Application

    In this Ionic 5/4 tutorial, we’ll discuss pull or swipe down the page to refresh functionality in Ionic Angular application using the UI components available in the Ionic framework. As seen in many Android native applications like chrome browser we usually have a user-friendly feature to pull down the page to refresh. A user just…

    Read more: Ionic 5 Pull/ Swipe Down to Refresh on Ionic Page Tutorial with Example Application
  • Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x

    In this post, we will discuss one of the major updates in Angular 7 version, its new Virtual scroll feature in CDK which is Material Component Development Kit. Virtual scrolling comes into action where we have a long list of item in applications, the performance of page decreases due to lots of hidden HTML data which…

    Read more: Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x
  • Ionic 3 Resolve “Execution failed for task ‘:app:processDebugResources’.”

    During development Ionic 3 project when I added Ionic Native File Opener plugin I faced the following issue during building android apk

    Read more: Ionic 3 Resolve “Execution failed for task ‘:app:processDebugResources’.”
  • Ionic 3 Adding Bug and Crash Reporting System Crashlytics in Ionic Native 3.X

    Firebase Crashlytics service is widely used these days by many developers, it helps in reporting crash, bug, and error reporting in your dashboard. This helps a lot to know the reasons behind application crashes and improving user experiences. Firebase Crashlytics is now only used in Native applications, In this tutorial, we will implement to Cordova plugin in…

    Read more: Ionic 3 Adding Bug and Crash Reporting System Crashlytics in Ionic Native 3.X