ion-picker does not work in standalone components based application

[pStefanec]

Ionic version: [ ] 4.x [ ] 5.x [x] 8.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior: In one of my pages I use ion-picker inside ion-modal but when I import all of the Ionic components from @ionic/angular/standalone and import them in the component the ion-picker won't populate with any options. I can only get it work in on browser if I remove all of the component imports (except the commonModule) and use schemas: [CUSTOM_ELEMENT_SCHEMA]

Expected behavior: After clicking on one of the manufacturers buttons, ion-modal with appear displaying ion-picker with filtered model options. It should work with imports from @ionic/angular/standalone.

Related code: this is my model.page.html:

<ion-content>
  <div class="tiles">
    <ion-button *ngFor="let name of manufacturers" id="open-modal" (click)="show_models(name)">{{ name }}</ion-button>
  </div>

  <ion-modal #modal [isOpen]="modal_opened" (didDismiss)="closeModal($event)">
    <ng-template>     
      <ion-picker>
        <ion-picker-column (ionChange)="onIonChange($event)">
          <ion-picker-column-option *ngFor="let filt_model of filtered_models" value="{{ filt_model.id }}">{{ filt_model.name }}</ion-picker-column-option>
        </ion-picker-column>
      </ion-picker>

      <ion-toolbar>
        <ion-buttons slot="start">
          <div class="cancel-button">
            <ion-button (click)="modal.dismiss('cancel')">Cancel</ion-button>
          </div>
        </ion-buttons>
        <ion-buttons slot="end">
          <div class="confirm-button">
            <ion-button (click)="modal.dismiss('confirm')">OK</ion-button>
          </div>
        </ion-buttons>
      </ion-toolbar>
    </ng-template>
  </ion-modal> 
</ion-content>

and this is part of my model.page.ts:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';

// import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { IonContent, IonButton, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar, IonButtons } from '@ionic/angular/standalone';

@Component({
  selector: 'app-models',
  templateUrl: './models.page.html',
  styleUrls: ['./models.page.scss'],
  standalone: true,
  imports: [CommonModule, IonContent, IonButton, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar, IonButtons],
  // schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Other information: Please note that I am fairly new to Ionic so be patient if it's some newbie error (I hope it's just something stupid).

Ionic info:

Ionic:

   Ionic CLI                     : 7.2.0 (\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 8.0.0-rc.2
   @angular-devkit/build-angular : 17.3.6
   @angular-devkit/schematics    : 17.3.6
   @angular/cli                  : 17.3.6
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

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

Utility:

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

System:

   NodeJS : v20.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.7.0
   OS     : Windows 10

[pStefanec]

So I just realized that when I wrap inside of ion-modal in ng-template like this it will work as intended:

  <ion-modal #modal [isOpen]="modal_opened" (didDismiss)="closeModal($event)">
    <ng-template>     
      <ion-picker>
        <ion-picker-column (ionChange)="onIonChange($event)">
          @for (filt_model of filtered_models; track filt_model) {
            <ion-picker-column-option value="{{ filt_model.id }}">{{ filt_model.name }}</ion-picker-column-option>
          }
        </ion-picker-column>
      </ion-picker>

      <ion-toolbar>
        <ion-buttons slot="start">
          <div class="cancel-button">
            <ion-button (click)="modal.dismiss('cancel')">Cancel</ion-button>
          </div>
        </ion-buttons>
        <ion-buttons slot="end">
          <div class="confirm-button">
            <ion-button (click)="modal.dismiss('confirm')">OK</ion-button>
          </div>
        </ion-buttons>
      </ion-toolbar>
    </ng-template>
  </ion-modal>

just to clarify, the documentation shows correct usage example and it is entirely my fault as I removed it for some reason (I guess I don't understand angular well enough)...

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