[RC1] [ionic2] Click event not getting triggered if its in a *ngIf condition

[maruti]

Hi,

If I am biding a click event to an element which is under a if condition in DOM, the events associated with same element are not getting triggered in Android devices, same thing works fine in iOS devices. I have a created a sample git repo to reproduce the same. Please check the home.html and home.ts for the code.
sample code :

home.html

  <ion-searchbar placeholder="Search" [(ngModel)]="myInput" (ionInput)="search($event)" (ionBlur)="onBlur($event)" (ionCancel)="onCancel($event)"> </ion-searchbar>
  <ion-list *ngIf="!isSearchOn">
    <ion-item *ngFor="let emp of selectedEmployees">
        <p>{{emp}}</p>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="isSearchOn">
    <ion-item *ngFor="let emp of employees" tappable (click)="itemTapped($event, emp)">
        <p>{{emp}}</p>
    </ion-item>
  </ion-list>

home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public selectedEmployees: any = [];
  public employees: any = [];
  public isSearchOn: any = false;
  public myInput:any ="";
  constructor(public navCtrl: NavController) {
      this.selectedEmployees = [];
      this.employees = ["dummy","care","me","try","we"];
  }
  search(event) {
    let q = this.myInput;
    if (q.trim() == '') {
      this.isSearchOn = false;
      return;
    }
    this.isSearchOn = true;
  }
  onCancel(event) {
    this.isSearchOn = false;
  }
  onBlur(event) {
    this.myInput = "";
    this.isSearchOn = false;

  }
  itemTapped(event, employee) {
    debugger
    this.selectedEmployees.push(employee);
    this.isSearchOn = false;
    console.log(employee);
  }
}

itemTapped event is never getting called!
Sorry if its confusing!
GIT LINK

[gerardx20]

Dont know if item list should be clickable, but I figure to have something similar working with buttons, so, instead of:

<ion-item *ngFor="let emp of employees" tappable (click)="itemTapped($event, emp)">
   <p>{{emp}}</p>
 </ion-item>

Try:

<button ion-item *ngFor="let emp of employees" tappable (click)="itemTapped($event, emp)">
    <p>{{emp}}</p>
</button>

[maruti]

@gerardx20, I tried this solution, dint work, and remember this issue is there only on Android devices, not on any iOS devices.
ionic info

Your system information:
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X Sierra
Node Version: v4.6.0
Xcode version: Xcode 8.0 Build version 8A218a 

The problem which I stated is not having any issue with the iOS devices.

[gerardx20]

Hi there, I checked your code and I think I’ve found the reason why is not working.

Here are my thoughts, hope are useful to you:

Remember in the if condition for equal value you should use ‘===’, instead of ‘==’.

Also, in the ‘search’ function you are just toggling the show condition, making to display all the values in the employees array, ando not making an actual search. To fix this add a filter to create the actual search array.

Summing it up: You need a function to initialize items every time the search is triggered, and a filter to pass the actual array.

I suggest that use the documentation example as a starting point and adapt it to your user case.

Documentation example:

Ionic Framework