Nested components inside ion-item-sliding are not showing

Ionic Framework ionic-v3
1

I can’t add nested components inside ion-item-sliding. I mean everything compiles without errors, but components are not shown in the list, I have this code:

<ion-list>
    <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
      <ion-item-sliding *ngFor="let item of items(); let i = index" (click)="viewItem(i)">
        <ion-item>
          {{item.title}}
        </ion-item>
      </ion-item-sliding>
    </ion-item-group>
</ion-list>

When I try to replace it with:

<ion-list>
    <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
      <ion-item-sliding *ngFor="let item of items(); let i = index" (click)="viewItem(i)">
          <repeatable-task [item]="item"></repeatable-task>
      </ion-item-sliding>
    </ion-item-group>
  </ion-list>

where repeatable-task is:

  <ion-item>
     {{item.title}}
  </ion-item>

The repeatable-task constructor is called for each iteration of *ngFor.

When I place repeatable-task outside of ion-item-sliding it appears on screen.

2

Unfortunately, I don’t think this is doable currently. The presence of the <repeatable-task> element confuses <ion-item-sliding>, which is expecting to have an <ion-item> as a direct child.

1 Like
3

I did a version of this by putting an ion-item with no padding inside the ion-item-sliding, and putting my component inside that ion-item. So it’s possible if your repeatable-task conforms to ion-item formatting. However, I’ve only tested that formatting trick in Ionic Serve at this point, not sure how it looks on real devices.

1 Like
4

Just to be clear, in this situation, <ion-item> is still a direct child of <ion-item-sliding>, right?

5

Yeah. I’ve both put the ngFor in the ion-item-sliding, and also in a wrapping div, which might be more stable than putting it in the Ionic component. Specifically: myComponent is some component I define:

<ion-item>
  Formatting that I want to repeat
</ion-item>

Then the page looks like

<div *ngFor="let item of items">'
  <ion-item-sliding>
    <ion-item no-lines no-padding> // might have to tweak this to the padding that fits your component
       <myComponent [input]="data"></myComponent>
    </ion-item>
  </ion-item-sliding>
</div>
1 Like
6

Thank you, it finally worked for me.

By the way, I’ve tried it before and I think ionic serve didn’t recompile it, so I thought it doesn’t work. Only after I saw your example I’ve tried replacing <myComponent … /> with a static string and it recompiled, then added the <myComponent … /> back and now it worked. So is there a command which will forcefully recompile the entire project for ionic serve?

7

app-scripts watches different things in different versions. Your browser page cache might have been the issue too. If you make a significant change, it’s probably best to close the browser, exit Ionic Serve, and run Ionic Serve again.

1 Like
8

Thank you.

Found one more issue: When inside the <myComponent … /> I have a ion-checkbox :

<ion-checkbox ></ion-checkbox>
<ion-label>{{item.getTitle()}}</ion-label>

it also doesn’t show.

When I put it inside ion-item:

<ion-item>  
  <ion-checkbox ></ion-checkbox>
  <ion-label>{{item.getTitle()}}</ion-label>
</ion-item>

then it shows but the component has 2 reorder elements.

9

Any chance you’re lazily loading your component? I think that’s generally a bad idea, but if you insist, you must import IonicModule in the component’s module.

10

I’m not sure, but I’ve created a module for all subcomponents and added it to app.module.ts imports

I’ve tried now to add IonicModule to imports of that subcomponents module and it didn’t help. (still shows 2 reorders when there is a ion-item inside component and doesn’t show the component when I’m removing ion-item.

11

I was unable to deploy this to a plunker, but I’ve created a repository here:

And here I’ve deployed it:

https://sergiob.github.io/IonicBugNestedComponent/

12

I’ve created an issue: