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


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.


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

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.


Have you tried adding “item-content”?


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 select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>
    <ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>
    <ion-reorder *ngIf="_shouldHaveReorder"></ion-reorder>
<div class="button-effect"></div>

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


This is working, but a little tricky:

    <my-directive class="item-block"

In my-directive:

<ion-thumbnail item-left>
    <img [src]="itemInDirective.src">