fix(item-sliding): open method works with items added async

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #26991

Items added asynchronously inside of IonItemSliding causes the open method to break. This is because IonItemSliding queries for the IonItem in connectedCallback:

ionic-framework/core/src/components/item-sliding/item-sliding.tsx

Line 71 in f686440

this.item = this.el.querySelector('ion-item');

If the item is not in the DOM, this returns null. This causes the open method to return early since this.item is null:

ionic-framework/core/src/components/item-sliding/item-sliding.tsx

Lines 130 to 132 in f686440

	if (this.item === null) {
	return;
	}

. As a result, the item sliding does not open.

This impacts v6 and v7. However, it is more noticeable in Ionic Angular v7 (versus v6) because of the optimizations we made in #26461 by removing initializeNextTick. When projecting content in Angular using ng-container, that content is added async. So if IonItem was added inside of IonItemSliding using ng-container, the item would not be available in the DOM when the item sliding component was mounted.

This was never a problem in v6 because all Ionic Angular components initialized in the next tick in Stencil. This meant that by the time item sliding was initialized, Angular had already added the item to the DOM.

What is the new behavior?

• Item sliding queries for the ion-item if it is null when the open method is called.

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.