Show image loader in ionic | html

In above image please check 1,2,3 cases.

Case 1 - Image is not loaded so here loader is showing.

Case 2 - Image is half loaded so still image loader is showing.

Case 3 - Image is fully loaded so loader is not showing.

Solution -

Hey guys, There are many third-party libraries available for this but when I try those libraries nothing working properly. So I found a solution with the help of CSS. This is very simple and easy to use. In this solution, we will show loader git until the image load in img tag. So now check below details for solution -

First, in your CSS file add below class -

.default-img-loader{

  background: url('../assets/img/loader.gif') no-repeat center;

}

This class will add a background image to the image tag. Here we used below property -

url('../assets/img/loader.gif')  - Make sure to update path according to your project.

no-repeat  - This will not repeat image in background.

center - This will place the image in center.

Now, In your HTML (template) file add “default-img-loader” class in image tag.

Eg- 

<img class=“default-img-loader” src=“your image url path of server”>

Note - Gif image size should be 16 × 16 OR 18 × 18 for batter experience. You can download loader from below URL -

http://loadinggif.com

Feel free to post a comment if you face any issue during the implementation of this. 

This will help in this case when you are fetching images from server and image size is very long. With the help of this solution, you can show loader until the image fully load. This will work for ionic, HTML, angular, PhoneGap etc. This works for me. I develope ionic app and its working perfect in this.

  

Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle

CordovaError: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle


To solve this issue you have to install gradle. To install gradle please use below steps -

For debian/ubuntu - If your system is a debian/ubuntu then, in this case, you can use below command on the terminal to install gradle. 
sudo apt-get install gradle


For Mac - If your system is a Mac then follow below steps -  

First, download the gradle binary only distribution with the help of this URL - https://gradle.org/gradle-download/
Now open your system terminal and run the following command to unzip the android sdk into the development directory that is under your user home directory
unzip ~/Downloads/gradle-3.1-bin.zip -d ~/Development

To edit base profile open vi editor. We also need to set GRADLE_HOME environment variable 
vi ~/.bash_profile

To enter in edit mode in vi editor hit i and now add below text to .bash_profile
export GRADLE_HOME=~/Development/gradle-3.1/bin

To exit edit mode press Esc key 
To enter in command mode press : (colon key)

To save changes and exit vi editor type wq and press enter key.

To update changes run the following command 
source ~/.bash_profile

Now test this by running below command in terminal 
echo $GRADLE_HOME

For Windows - If your system is a Windows then follow below steps -   
This is a very long process, Here are some steps for windows. Just follow all steps mentioned on below URL -
http://bryanlor.com/blog/gradle-tutorial-how-install-gradle-windows

An error occurred while running subprocess ionic-app-scripts

An error occurred while running subprocess ionic-app-scripts. ionic-app-scripts build exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Solution - 

This is due to the latest version of ionic and Cordova in your system but your project does not support this version.

Run below command in your project -

ionic info

Below is the above command result - 

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2

    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) 

local packages:

    @ionic/app-scripts : 1.3.0

    Cordova Platforms  : android 6.3.0 ios 4.3.1

    Ionic Framework    : ionic-angular 3.0.1

System:

    Node : v10.14.2

    npm  : 6.4.1 

    OS   : macOS High Sierra

Here as we can see Ionic CLI version is “3.20.0” so we need to update CLI version to this, Then I can build the project without error.

To update CLI version please run below command -

npm i -g ionic@3.20.0

Above command result is -

npm i -g ionic@3.20.0

npm WARN deprecated @ionic/cli-utils@1.19.2: Latest Ionic CLI does not use this package.

/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic

> fsevents@1.2.4 install /usr/local/lib/node_modules/ionic/node_modules/fsevents

> node install

[fsevents] Success: "/usr/local/lib/node_modules/ionic/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

+ ionic@3.20.0

added 323 packages from 157 contributors, removed 106 packages, updated 23 packages and moved 5 packages in 20.135s

Now update Cordova for this by using below command -

npm install -g cordova

Above command result is -

/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

+ cordova@8.1.2

updated 1 package in 3.948s

Now again try to build your project by using below command-

ionic cordova build ios

This should work but if you are getting below error -

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)

For more information on which environments are supported please see:

https://github.com/sass/node-sass/releases/tag/v4.5.0

Run below command in your project -

npm rebuild node-sass

Above command will resolve the issue related to Node Sass. 

If you still having this issue, Check your Node version. In my case node version was “v6.14.1” So when I update none version to “v6.14.1” and run again this command.

You can check all released version of node on below URL -

https://nodejs.org/en/download/releases/

Now after updating version run below command in your project -

ionic cordova build ios

Now in my case above command build the project successfully. Please try in your project and post a comment if you still have any issue to build the project.

Ionic content does not scroll when you add tap | press gesture

Hello All, This ionic scroll issue is mostly related to Android devices. I always face this issue in android only. It's within <ion-item> or <ion-card> or maybe some other tags. Please check below description for more information -


1. A solution for (tap) gesture -

To solve this issue please replace tap event with the click.

Issue -

<ion-item (tap)=“yourFunction()">

</ion-item>


Solution -
<ion-item (click)=“yourFunction()">

</ion-item>




2. A solution for (press) gesture -

Issue -
<ion-item (press)=“yourFunction()">

</ion-item>


Solution -
<ion-item (long-press)=“yourFunction()">

</ion-item>


First please create (press directive with selector name as long-press) a directive to solve this issue -

Now add below code in press directive -

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

@Directive({
  selector: '[long-press]'
})

export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;
  @Output('long-press') onPressRelease: EventEmitter = new EventEmitter();

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  ngOnInit() {
    this.pressGesture = new Gesture(this.el);
    this.pressGesture.listen();

    this.pressGesture.on('press', (event) => {
      this.onPressRelease.emit('released');
    });
  }

  ngOnDestroy() {
    this.pressGesture.destroy();
  }
}


Now import this directive in your module file -

import { PressDirective } from '../directives/press/press';


@NgModule({
  declarations: [
    MyApp,
PressDirective,
],


});



Please check above all details. Hope so this will resolve your problem. If you still having any issue please add a comment on this post with some details. I will try to resolve your issue. Thanks!