Custom ion-item?

I want to make a component that follows the ion-item css and behavior, i was thinking on making a custom ion-item-sync but it would break the css, also if i put the component as a child of ion-item then a class i use for conditional background with ngClass would be inset and will not cover all the ion-item due to the padding it has.

If i extend the ion-item the css are lost, how would i create a variable in the page that would be available in the new sync component?, in this case i want the sync component to update the synced page variable, how do i do that?

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