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

I have a number of elements that I want to show based on an asynchronous call. When clicking on the button, the popover is not triggered.

this.items$ = of(['item1', 'item2']).pipe(delay(100));

<div *ngFor="let item of items$ | async">
    <ion-button [id]="item"> Show popover </ion-button>
    <ion-popover [trigger]="item">
        <ng-template> Hello world! </ng-template>
    </ion-popover>
</div>

Expected Behavior

Popover shows

Steps to Reproduce

See reproduction

Code Reproduction URL

https://github.com/jeroenkroese/ionic-async-ngfor

Ionic Info

Ionic:

Ionic CLI : 7.1.5 (/Users/jeroenkroese/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.5.4
@angular-devkit/build-angular : 17.0.0
@angular-devkit/schematics : 17.0.0
@angular/cli : 17.0.0
@ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v18.15.0 (/Users/jeroenkroese/.nvm/versions/node/v18.15.0/bin/node)
npm : 9.5.0
OS : macOS Unknown

Additional Information

No response