Component inside ion-item with click not working

Ionic Framework ionic-v3
#1

Hi, i have a component inside a ion-item with a (click) event attached but it doesn’t works, the (click) ones attached directly to the other ion-item's works, it’s just the one in the component, why?, i think it’s the ion-item catching the click events before the component does, maybe has to do with z-index?:

Parent html:

<ion-item [ngClass]="{'primary-disabled': sync}">

  <syncServ (synced)="onSync($event)"></syncServ>
</ion-item>

Child html:

<div (click)="syncServer()">

  <i class="fa fa-refresh fa-2x"></i>
  <div>
    P: {{ orders }} V: {{ visits }}
  </div>
</div>

Child component js:

import {Component, Output, EventEmitter} from 'angular2/core';

import {Config, DB} from '../../services/services';

@Component({
  selector: 'syncServ',
  templateUrl: 'build/components/sync/sync.html',
})
export class SyncComponent {
  orders = 0
  visits = 0
  tryIt = true

  @Output() synced = new EventEmitter();

  constructor(
    conf: Config,
    db: DB
  ) {
    this.conf = conf
    this.db = db
    console.log('Test')
  }

  ngOnInit() {
    this.synced.emit({value: true})
  }

  syncServer() {
    console.log('SyncServ')
    this.tryIt = !this.tryIt
    if (this.tryIt) {
      this.synced.emit({value: true})
    } else {
      this.synced.emit({value: false})
    }
  }
}