Ionic-framework: bug: Custom component within ion-item ignored

Created on 9 Jul 2016 · 6Comments · Source: ionic-team/ionic-framework

Type: bug

Ionic Version: 2.x

Platform: all

When using a custom component within an <ion-item>, it is ignored on the using page:

<ion-list>
  <ion-item>
    <my-comp></mycomp> <!-- ignored -->
  </ion-item>
</ion-list>

(Where my-comp contains for example just <ion-input type="text"></ion-input>)

When I put the whole <ion-item> in the custom component, it works:

<ion-list>
  <my-comp></mycomp> <!-- now working -->
</ion-list></span>

(Where my-comp contains now for example <ion-item><ion-input type="text"></ion-input></ion-item>)

Source

Xenoage

Most helpful comment

I had the same problem. Adding the item-content attribute solved the issue for me

<ion-list>
  <ion-item>
    <my-comp item-content></mycomp> <!-- no longer ignored -->
  </ion-item>
</ion-list>

Richie765 on 1 Oct 2016

🎉5

All 6 comments

So custom components won't work inside of an ion-item because Items use Angular's content projection to place the elements inside of it. There is some more info on this here: http://ionicframework.com/docs/v2/api/components/item/Item/#item-placement

What is your wrapper component doing? Trying to understand the full use case here. Thanks!

brandyscarney on 11 Jul 2016

In my case I have created a reusable date input control, consisting of a text field and a clickable icon which opens a graphical date chooser. Full code:

<div>
  <ion-input #dateInput type="text" [ngModel]="date" (blur)="onDate(dateInput.value)"></ion-input>
  <ion-icon name="calendar" item-right (click)="pickDate()" class="rs-inputicon"></ion-icon>
</div>

My current workaround is, as already mentioned, to put the whole item into the custom component. Unfortunately, its usage is now more limited because of the added label.

<ion-item>
  <ion-label stacked>{{label}}</ion-label>
  <ion-input #dateInput type="text" [ngModel]="date" (blur)="onDate(dateInput.value)"></ion-input>
  <ion-icon name="calendar" item-right (click)="pickDate()" class="rs-inputicon"></ion-icon>
</ion-item>

Xenoage on 12 Jul 2016

jgw96 on 25 Jul 2016

I had the same problem. Adding the item-content attribute solved the issue for me

<ion-list>
  <ion-item>
    <my-comp item-content></mycomp> <!-- no longer ignored -->
  </ion-item>
</ion-list>

Richie765 on 1 Oct 2016

🎉5

Hello all, I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/6849.

jgw96 on 18 May 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.