How do I use my own components inside ion-item?

Ionic Framework ionic-v3
1

Hello all,

I try to start to migrate my ionic v1 application. And I have a dilemma.
I try to use my own component in ion-list.

MainComponent

<ion-item *ngFor="let item of items" (click)="itemTapped(item)">
    <own-item [item]="item"></own-item>
</ion-item>

OwnItemComponent uses some ionic component like “ion-thumbnail”. (OwnItemComponent will be use as plenty of place in application.)

<ion-thumbnail item-left>
    <img [src]="item?.src">
</on-thumbnail>

But I have some troubles with the render. In fact, my component is inside the node “item-inner” instead outside.
I try to work with “ng-content” without success.

Any help.
Thanks in advance.

1 Like
2

Have you tried adding “item-content”?

3

Yes, I tried.

“item-content” does not work too. In fact, we need to take a look to the template:

<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>
<div class="item-inner">
    <div class="input-wrapper">
        <ng-content select="ion-label"></ng-content>
        <ion-label *ngIf="_viewLabel">
             <ng-content></ng-content>
        </ion-label>
        <ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>
    </div>
    <ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>
    <ion-reorder *ngIf="_shouldHaveReorder"></ion-reorder>
    </div>
<div class="button-effect"></div>

“item-content” put the content in item-wrapper and input-inner.

4

This is working, but a little tricky:

<ion-item>
    <my-directive class="item-block"
                            [my-item]="myItem"
                            item-left>
    </my-directive>
</ion-item>

In my-directive:

<ion-thumbnail item-left>
    <img [src]="itemInDirective.src">
</ion-thumbnail>
<span>{{itemInDirective?.name}}</span>