bug: ion-item-sliding reference to inner item is not reactive, breaks when using ngIf

[digaus]

Bug Report

Ionic version:
[x] 4.9.0

Current behavior:

Expected behavior:

I am unable to slide the item when toggleing the ion-item inside it.

Steps to reproduce:

Create an ion-item-sliding with two ion-item inside it which you toggle with an *ngIf

Related code:

<ion-item-sliding>
  <ion-item *ngIf="show"></ion-item>
  <ion-item *ngIf="!show"></ion-item>
  <ion-item-options side="end">
    <ion-item-option color="success">
      <ion-icon slot="icon-only" name="create"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (C:\Users\digau\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.3.3
   @angular/cli                  : 8.3.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (1 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.2
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. The problem here is that ion-item-sliding grabs a reference to the inner ion-item when it is added to the DOM: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item-sliding/item-sliding.tsx#L70

When toggling the ion-item elements with ngIf, the reference ion-item-sliding had to the first ion-item is no longer in the DOM, but it does not grab a reference to the new ion-item that has been added to the DOM.

To fix this, we should query for ion-item in the onStart callback.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23943, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-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.