Using ion-item inside a component breaks rendering?

@gonzoide wrote:

If you take a typical ion-item in a list being fed by *ngFor, everything works by the book. But if you strip out the ion-item definition to make it a document template, then rendering is completely garbled, and extra stuff like ion-item-sliding does not work anymore (I can see in my test app that Component is correctly invoked as all expected data is there - only rendering has issues.

I guess this is a known issue, is there a workaround to this ? Thanks.

Initial (dumb) list:

<ion-item-sliding *ngFor="#user of contacts">
    <ion-item>
        <ion-thumbnail item-left>
        <img width=64 height=64 src="{{ identicon(user) }}">
    </ion-thumbnail>
        <h2>{{ user.name }}</h2>
        <h3>{{ user.quote }} </h3>

        <ion-item-options>
        <button primary>
            <ion-icon name="text"></ion-icon>
            Text
        </button>
        <button secondary>
            <ion-icon name="call"></ion-icon>
            Call
        </button>
        </ion-item-options>
    </ion-item>
</ion-item-sliding>

Component template and usage in list :

<ion-item-sliding>
    <ion-item>
        <ion-thumbnail item-left>
        <img width=48 height=48 src="{{ identicon() }}">
    </ion-thumbnail>
        <h2>{{ user.name }} </h2>
        <h3>{{ user.quote }} </h3>

        <ion-item-options>
        <button primary>
            <ion-icon name="text"></ion-icon>
            Text
        </button>
        <button secondary>
            <ion-icon name="call"></ion-icon>
            Call
        </button>
        </ion-item-options>
    </ion-item>
</ion-item-sliding>

[...]

<user [user]="user" *ngFor="#user of contacts"></user>

Of course tag becomes part of generated HTML and this has to be considered when writing (s)css, but in this case the app is built from scratch with default styling, so I guess built-in styles already take this into account ?

Posts: 1

Participants: 1

Read full topic