Ionic-framework: ion-item-sliding not working with custom component

[aggarwalankush]

Short description of the problem:

Using custom component in ion-item-sliding not working, it works with ion-item.
Please refer to below minimal github commit to reproduce issue.

Steps to reproduce:
https://github.com/aggarwalankush/ionic-inappbrowser-issue/commit/50fcae9338d8cb95fceb1cc2904b59a5d37ccc11

Which Ionic Version?
Ionic 2 beta 11

Run ionic info from terminal/cmd prompt: (paste output below)
Your system information:

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello! Thanks for using Ionic! Would you mind trying markup like this

<ion-item-sliding *ngFor="let item of items">
  <!-- move ion-item out of the custom component to here -->
  <ion-item>
    <my-item [item]="item"></my-item>
  </ion-item>
</ion-item-sliding>

[aggarwalankush]

Now it displays list but it's now ion-item inside ion-item and creating a weird layout.
See last two rows in below screenshot

[jgw96]

Hello! Would you mind posting the template for you custom component? Thanks!

[aggarwalankush]

import {Component, Input} from "@angular/core";
@Component({
  selector: 'my-item',
  template: `<button ion-item>{{item}}</button>`
})
export class ListItemComponent {
  @Input('item') item;
}

Full commit - https://github.com/aggarwalankush/ionic-inappbrowser-issue/commit/50fcae9338d8cb95fceb1cc2904b59a5d37ccc11

P.S. this template is small for demo purpose, in my app, I've big template with ion-avatar and sliding options. Adding ion-item misaligned everything.

[jgw96]

Thanks! Ahh, I see the issue. Could you remove the ion-item attribute from that button? If you still want the item to be clickable (which im guessing you do) then you can change the markup I suggested above to this:

<ion-item-sliding *ngFor="let item of items">
  <button ion-item>
    <my-item [item]="item"></my-item>
  </button>
</ion-item-sliding>

[aggarwalankush]

Thanks for quick reply and helping me on this issue.
First of all, I updated the template to be more realistic. Please see commit https://github.com/aggarwalankush/ionic-inappbrowser-issue/commit/d1c1c678ca2b9eb86937e49233e934a19214b1e4

As you can see in commit, I remove ion-item from button and using

 <ion-item-sliding *ngFor="let item of items">
      <button ion-item>
        <my-item [item]="item"></my-item>
      </button>
    </ion-item-sliding>

where my-item is

import {Component, Input} from "@angular/core";
@Component({
  selector: 'my-item',
  template: `
      <button (click)="itemClicked(item)">
        <ion-avatar item-left>
          <img src="img/appicon.png">
        </ion-avatar>
        <h2>{{item|uppercase}}</h2>
        <ion-badge item-right>
            <ion-icon name='happy'></ion-icon>
        </ion-badge>
      </button>
      <ion-item-options>
        <button primary style="width:15vw">
          <ion-icon name="star"></ion-icon>
          <span>Favorite</span>
        </button>
        <button secondary style="width:15vw">
          <ion-icon name="call"></ion-icon>
          <span>Call</span>
        </button>
      </ion-item-options>
`
})
export class ListItemComponent {
  @Input('item') item;

  itemClicked(item) {
    console.log('item clicked - ' + item);
  }
}

It isn't working.

[jgw96]

No problem, thanks for all the info! Could you describe exactly what is not working in the above screenshot?

[aggarwalankush]

I created the above screenshot with below code

<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg">
  <ion-list>

    <!--WORKING-->
    <ion-item-sliding *ngFor="let item of items">
      <button ion-item (click)="itemClicked(item)">
        <ion-avatar item-left>
          <img src="img/appicon.png">
        </ion-avatar>
        <h2>{{item|uppercase}}</h2>
        <ion-badge item-right>
          <ion-icon name='happy'></ion-icon>
        </ion-badge>
      </button>
      <ion-item-options>
        <button primary style="width:15vw">
          <ion-icon name="star"></ion-icon>
          <span>Favorite</span>
        </button>
        <button secondary style="width:15vw">
          <ion-icon name="call"></ion-icon>
          <span>Call</span>
        </button>
      </ion-item-options>
    </ion-item-sliding>

    <!--  ---------THIS IS NOT WORKING------------- -->
    <ion-item-sliding *ngFor="let item of items">
      <button ion-item>
        <my-item [item]="item"></my-item>
      </button>
    </ion-item-sliding>


<!--  ---------THIS IS NOT SHOWING ANYTHING------------- -->
    <ion-item-sliding *ngFor="let item of items">
        <my-item [item]="item"></my-item>
    </ion-item-sliding>

  </ion-list>
</ion-content>

where my-item template is

import {Component, Input} from "@angular/core";
@Component({
  selector: 'my-item',
  template: `
      <button (click)="itemClicked(item)">
        <ion-avatar item-left>
          <img src="img/appicon.png">
        </ion-avatar>
        <h2>{{item|uppercase}}</h2>
        <ion-badge item-right>
            <ion-icon name='happy'></ion-icon>
        </ion-badge>
      </button>
      <ion-item-options>
        <button primary style="width:15vw">
          <ion-icon name="star"></ion-icon>
          <span>Favorite</span>
        </button>
        <button secondary style="width:15vw">
          <ion-icon name="call"></ion-icon>
          <span>Call</span>
        </button>
      </ion-item-options>
`
})
export class ListItemComponent {
  @Input('item') item;

  itemClicked(item) {
    console.log('item clicked - ' + item);
  }
}

We are putting template in <button ion-item> and template has <ion-item-options> also, so you can't slide list item to see options, also everything is misaligned as compare to if we don't use template.

[vince-nyanga]

I have a similar issue

[eggplantPrince]

same issue here!

[Urbiwanus]

Problem still exists with Version 2.2.0

[brandyscarney]

This issue goes back to our issues with nested content projection. Basically when you wrap it in a custom component it isn't able to grab the individual components and place them in the correct location inside of the item. I wrote some details on this in this comment: https://github.com/ionic-team/ionic/issues/9080#issuecomment-259592397

Here is a forum post discussing how item projection works: https://forum.ionicframework.com/t/confused-about-ion-item-usage/54116/10

There is some documentation on item placement here: http://ionicframework.com/docs/api/components/item/Item/#item-placement

I am going to close this issue as it isn't something that we will be able to fix in v3, but it will be fixed in v4. Please see my comment here for more information.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.