Using ion-item inside a component breaks rendering?

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 ?

Please see very bottom post by @brayhoward, in this link:
previous post

I was having a similar issue with an ion-list in a component, but by importing and declaring IONIC_DIRECTIVES my issues were cleared up.

Thanks for the tip, I’ll try it tonight.

Apart from

import {IONIC_DIRECTIVES} from ‘ionic-framework/config/directives’;

Is there anything to be done to have it working ? (the “declaring” part you mention I guess ?). Also, should I do this in my component, or the Page using it ?

This hack would seem to indicate that Ionic doc ( http://ionicframework.com/docs/v2/2.0.0-alpha.40/api/config/IONIC_DIRECTIVES/ ) is incorrect :

Automatically available in every @Page template

(while this does not seem to be the case)

What I did:
import {IONIC_DIRECTIVES} from “ionic-angular/index”;
and
within @Component decorator: directives: [IONIC_DIRECTIVES]

I have only had to due this on components so far, no pages. Good luck.

1 Like

@laking44 : Man, you’re a star :slight_smile:

You can’t imagine for how long I’ve been stuck on this issue … and even after knowing the solution I can almost find no trace of it on the web, too bad this (fairly classical) issue is not better documented (or even better, avoided out of the box).

Thanks again.

Glad to help. I have found the ionic-v2 slack channel to be a good source of info. Many devs willing to help along with @mhartington of Ionic team. I am sure documentation will improve over time, but seems like Ionic team is very busy moving ionic2 beta along.

We have it documented on the Page API docs: http://ionicframework.com/docs/v2/api/decorators/Page/

and in the FAQ: http://ionicframework.com/docs/v2/faq/

However, I agree that it’s hard to find, so any feedback on where you think it should be documented is appreciated. I created an issue about automatically injecting it in custom Components but so far it doesn’t look like anyone wants that. :smile:

1 Like