bug: ion-item-sliding does not respond to `item.open()` when inner item has been rendered via ng-template

[lincolnthree]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When ion-item-sliding is rendered asynchronously, and the inner ion-item has been rendered via ng-template composition, sliding items fail to open when calling item.open() until they have been manually opened via the gesture.

Note that the contents of the sliding item are NOT rendered asyncronously -- This occurs when the ion-item-sliding itself is rendered asyncronously, in combination with the use of ng-template to contain the ion-item inside.

Please see the following video, where only items in the first group open on click:
https://user-images.githubusercontent.com/362329/226695190-36cb33d3-7aac-49f0-8f4a-118eab7f7b1e.mov

The issue occurs because this.item is null when open() is called on the sliding item instances rendered after the initial group. The function returns/aborts and the item is not opened:

  /**
   * Open the sliding item.
   *
   * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
   */
  @Method()
  async open(side: Side | undefined) {
    if (this.item === null) {
      return;
    }

Expected Behavior

Sliding items should open when item.open() is called in this scenario. This use-case is important, because using ng-template is a core part of Angular template composition and reduction of boilerplate/duplicate code within pages or components, and rendering additional items on a delay (or something like a paginator), is critical for rendering and page-load performance optimization.

Steps to Reproduce

1. Run sample app.
2. Click items in first group - they will open
3. Click items in any group rendered thereafter in the list - they will NOT open
4. Slide one of the non-opening items manually - it will open
5. Close that item
6. Click that item again - it will open

Code Reproduction URL

https://github.com/lincolnthree/ionic-issue-item-sliding-open

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 8.0.0

Capacitor:

Capacitor CLI : 4.7.1
@capacitor/android : not installed
@capacitor/core : 4.7.1
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node)
npm : 8.3.1
OS : macOS

Additional Information

No response

[lincolnthree]

Strangely enough, the following build seems to actually resolve this issue:

@ionic/angular@7.0.0-dev.11679581404.151a30f6 from #27002

Not sure why, but my testing between these versions seems to show that's the case.

Looking at the PR, there's nothing that should remotely affect the outcome of ion-item rendering. Is it possible that dev build also had some other changes?

This may already be fixed somewhere in dev-land, but I'd love to get confirmation on that!

[lincolnthree]

Are there nightly builds of V7?

[lincolnthree]

7.0.0-rc.4 does not resolve this issue.

[liamdebeasi]

Thanks for the report. Here is a dev build if you would like to test the proposed fix:

npm install @ionic/angular@7.0.0-dev.11679951388.1c4c9009