Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

brandyscarneycommented, Aug 9, 2018

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;
}

1reaction

peterpeterparkercommented, Aug 9, 2018

@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 😉