Ion-picker does not work correctly after migration to ionic v.8 standalone component based app

Ionic Framework
1

I developed my first app in ionic 7 and few days back I read about ionic 8 being released so I decided to migrate to the newest version and with it also switch to standalone components based application.

In one of my pages I use ion-picker inside ion-modal and prior to the migration it worked fine but now 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 if I remove all of the component imports (except the commonModule) and use schemas: [CUSTOM_ELEMENT_SCHEMA] .

this is part of my model.page.html:

<ion-modal #modal [isOpen]="modal_opened" (didDismiss)="closeModal($event)">    
  <ion-picker>
    <ion-picker-column (ionChange)="onIonChange($event)">
      <ion-picker-column-option *ngFor="let model of filtered_models" value="{{ model.id }}">{{ 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>
</ion-modal>

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]
})

I can only get it work if I remove all of the component imports (except the commonModule) and use schemas: [CUSTOM_ELEMENT_SCHEMA] . The filtered_models variable is populated correctly (in debugger it displays correct values). This is the error I get in the console but it just does not make any sense to me: ERROR TypeError: Cannot read properties of undefined (reading 'id') . Honestly I have no idea why it even builds without the imports…

2 Likes
2

help me please, I was not able to resolve this issue so far… :frowning: