Custom component as content of ion-item

Ionic Framework ionic-v3
1

I have a component that I want to act as content for ion-item because it will look exactly the same in a lot of pages, but I want custom handling of the ion-item (sometimes button with different click functions, sometimes just a regular item). Here’s a simplified example:

<ion-list>
  <button ion-item (click)="boo()">
    <my-item></my-item>
  </button>
</ion-list>

Here’s the template of my-item:

<ion-icon item-start name="american-football"></ion-icon>
<div item-content>
    My item content.
</div>

My problem here is that the ion-icon doesn’t get positioned according to the item-start. To my understanding it appears to be because ion-item (I guess actually ng-content’s select within ion-item) only looks for direct children, not descendants (this sounds like a very good idea btw). So the problem is since <my-item> is between the ion-item and item-start/item-content all I get is the whole <my-item> as the content, and no item-start.

Here’s a plunker displaying the issue I have: http://plnkr.co/edit/4syZzU4BU9C73NrNmhyi?p=preview
You’ll find my component in app/app.component.ts and the usage in app/home.page.html

Does anyone know of a way around this?

2

Hi@bodinaren
Try something like this.This may help you

<button ion-button icon-start (click)="boo()">
 	<my-item></my-item>
</button>
 
Template of my-item component

<ion-icon name="american-football"></ion-icon>
<div item-content>
    My item content.
</div>
3

Thanks for trying! It didn’t work though…

Ps. I was perhaps a bit unclear about the fact that I’m using these buttons in an ion-list. I’ve updated my original post to reflect this.