How to properly use (click) in ionic 2? [duplicate]

Question

This is my first attempt on using ionic 2. But already I'm having difficulties. But I'm trying. So after i start a new project, I went on to see how click event is used. I search and read throught the net. But still got no proper answer.

So I used this code on button click event.

<button myitem (click)='openFilters()'>CLICK</button>

And my .ts file look like as below.

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {
    openFilters() {
        console.log('crap');
    }
  }
}

I event tried adding selector: 'myitem', to the @component part.

Answer 1

The code in the button element is perfect. The issue is that you have declared the openfilters() method inside the constructor of the class, so the click event handler could not find it.

Put it outside the constructor, as another method of the class, and it will work as expected.

export class HomePage {
  constructor(private navCtrl: NavController) {
    // ...  
  }

  openFilters() {
    console.log('crap');
  }
}

Answer 2

To work with click function

your code should look like this

.html

<button myitem (click)='openFilters();'>CLICK</button>

.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {

  }

  openFilters() {
        console.log('crap');
    }
}

Answer 3

Click events will pose a delay issue on iOS devices. The user might have to click the element multiple times for ionic to identify the event. The reason for this issue is said to be the Ionic click blocker, that blocks any interaction until a transition is completely done. This is to recognize if the user wants a click event or double click event on touch devices.

Please refer to the solution at -

http://www.agiliztech.com/2017/05/29/click-handler-reaction-delay-ionic-2/