[Ionic v4] ion-picker not available in ionic angular

[bleuscyther]

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (C:\Users\<me>\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.1
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.3

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   NodeJS : v8.9.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

Bug description

using @ionic/angular
ion-picker , ion-picker-column , ion-picker-controller are not recognized by the compiler, the component is not here but its in the doc.
This not mentioned anywhere. Most likely its on its way but posting this here, just in case, someone else is looking for it.

[peterpeterparker]

But, I mean, ion-picker aren't a thing in v3 neither no? I can't find any references about that in any documentations

[bleuscyther]

@peterpeterparker 🕸 🕷 I think it s a new component

• https://beta.ionicframework.com/docs/api/picker

• https://beta.ionicframework.com/docs/api/picker-column

• https://beta.ionicframework.com/docs/api/picker-controller

[peterpeterparker]

@bleuscyther good call, don't know how to use it

the component seems to be there https://github.com/ionic-team/ionic/tree/7a8d5f68d28cdf49a77fc1674a092227a265ae6f/core/src/components/picker

looking forward to the solution ;)

[brandyscarney]

Thanks for the issue! Picker has been around for awhile and used by DateTime, but we have never had it documented before.

How are you using it? It should work similar to an Alert where you open it by using the controller. Here's an example:

import { PickerController } from '@ionic/angular';

@Component({
  ...
})
export class ComponentPage {
  constructor(public pickerCtrl: PickerController) { }

  async openPicker() {
    const picker = await this.pickerCtrl.create({
      buttons: [{
        text: 'Done',
      }],
      columns: [
        {
          name: 'days',
          options: [
            {
              text: '1',
              value: 1
            },
            {
              text: '2',
              value: 2
            },
            {
              text: '3',
              value: 3
            },
          ]
        },
        {
          name: 'years',
          options: [
            {
              text: '1992',
              value: 1992
            },
            {
              text: '1993',
              value: 1993
            },
            {
              text: '1994',
              value: 1994
            },
          ]
        },
      ]
    });
    await picker.present();
  }
}

where the create options are:

export interface PickerOptions {
  buttons?: PickerButton[];
  columns?: PickerColumn[];
  cssClass?: string | string[];
  enableBackdropDismiss?: boolean;
}

[bleuscyther]

oh! @brandyscarney Thx!

[echo-mei]

@brandyscarney What if I want to trigger an event before I select one column?Can the passed parameters be like this:
async openPicker() {
const picker = await this.pickerCtrl.create({
buttons: [{
text: 'Done',
}],
columns: [
{
name: 'days',
options: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: 'other',
value: '',
beforeHandler:()=>{//Here's what I want before I click trigger event }
}]
}
]
});
await picker.present();
}
}

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