Component or directive?

Ionic Framework ionic-v3
1

Hi, i need a ion-item to have certain behavior, it should be clickable, easy, also it has to use a class depending on some variable, and finally use that variable from a directive.

As far as i have:

<ion-item sync (click)="syncServer()" [ngClass]="{'primary-disabled': synced}">

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

How am i supposed to modify the synced variable from an internal component? please note that orders and visits will be variables from the component, something like this or like a component i think:

<ion-item sync (click)="syncServer()" [ngClass]="{'primary-disabled': synced}">

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

import {Directive, ElementRef} from 'angular2/core';

@Directive({
  selector: '[sync]'
})
export class SyncDirective {
  constructor(
    elementRef: ElementRef
  ) {
    this.ele = elementRef;
    this.orders = 0
    this.visits = 0
    this.sync = orders == 0 && visits == 0
  }
}