Using ion-item inside a component breaks rendering?

Ionic Framework ionic-v3
1

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 ?

2

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.

3

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)

4

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
5

@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.

6

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.

7

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