Ion-picker outside the modal and inside the inline page

I would like a feature to enable the inclusion of the ion-picker component within the content of a page without the need to open it in a modal, I managed to implement this feature with ion-datetime but it only works with dates, years and months and I want to use ion-picker to create an ios-style select and only that with ion-picker I can create but it only opens in modal, is this feature currently possible or could it be developed?

I am currently using the following code in angular/ionic 6

home.page.html

<ion-content>
  <ng-container >

    <ion-button expand="block" (click)="showPickerController()">Show Picker Controller</ion-button>

    <ion-list>     
      <ng-container *ngFor="let type of ['year']">   
            <ion-item slot="header">
              <ion-label>ion-datetime</ion-label>
              <ion-text slot="end"></ion-text>
            </ion-item>
            <ion-datetime
              size="cover"
              slot="content"
              [presentation]="type"
            >
            </ion-datetime>
      </ng-container>
    </ion-list>
  </ng-container>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  
})
export class HomePage {


  constructor(private pickerCtrl: PickerController) {}

  async showPickerController() {
    let opts: PickerOptions = {
      buttons: [
        {
          text: 'Ok'
        }
      ],
      columns: [
        {
          name: 'category',
          options: [
            { text: 'Dog', value: 'dog' },
            { text: 'Cat', value: 'cat' },
            { text: 'Fish', value: 'fish' },
            { text: 'Rabbit', value: 'rabbit' },
          ]
        }
      ]
    };
    
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      console.log('dismiss');
    });
  }
}

1 post - 1 participant

Read full topic