How to use ion-picker Ionic 7

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

ion-picker

The ion-picker component in Ionic allows you to create a picker interface for selecting one or more values from a predefined set of options. Here are the steps to use ion-picker in your Ionic app:

1. In your HTML file, create a button or any other UI element that will trigger the picker:

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      ion-picker
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true>">
</ion-button (click)="openPicker()">Open Picker</ion-button>
     <h2 *ngIf="value">Your choice is {{value}}</h2>
</ion-content>

1. In your component file, create a method that will open the picker:

home.page.ts

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

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

constructor(public pickerController: PickerController) {}

  async openPicker() {
    const picker = await this.pickerController.create({
      columns: [
        {
          name: 'fruit',
          options: [
            { text: 'Apple', value: 'apple' },
            { text: 'Banana', value: 'banana' },
            { text: 'Grape', value: 'grape' },
            { text: 'Orange', value: 'orange' },
            { text: 'Strawberry', value: 'strawberry' }
          ]
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Done',
          handler: (value) => {
            console.log(value.fruit.value);
            this.value = value.fruit.value;
          }
        }
      ]
    });

    await picker.present();
  }

CSS Custom

In this example, we have created a picker with one column that displays a list of fruits. When the user selects a value and clicks on the "Done" button, the handler function will be called, which will log the selected fruit value to the console.

Finally, add the necessary CSS styles for the picker in your global stylesheet:

home.page.css

.picker-col {
  max-width: 100%;
  width: 100%;
}

.picker-opt {
  text-align: center;
}

That's it! Now you can run your Ionic app and test the picker by clicking on the "Open Picker" button. You can customize the picker by adding more columns, changing the options, or modifying the buttons.