How to use ion-select 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-select

Selects are form controls to select an option, or options, from a set of options, similar to a native <select> element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.

A select should be used with child <ion-select-option> elements. If the child option is not given a value attribute then its text will be used as the value.

If value is set on the <ion-select>, the selected option will be chosen based on that value.

To use the ion-select component in Ionic 5, you can follow these steps:

1. Import the ion-select component in your page or component file:

In your HTML file, add the ion-select component and set the interface attribute to "popover", "action-sheet", or "alert". For example:

ionChange

In Ionic, ionChange is a commonly used event that is triggered when the value of an input, select, or range component changes. You can use this event to perform certain actions or update the state of your application based on the new value selected by the user.

To use ionChange, you need to follow these steps:

2. First, add the ionChange event to the component that you want to listen for changes on. For example, if you have a select component, you would add the ionChange event like this:

home.page.html

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Ionic select</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item [button]="true" [detail]="false">
      <ion-label>Favorite Fruits</ion-label>
      <div slot="end">{{ selectedFruitsText }}</div>
    </ion-item>
  </ion-list>

  <ion-card *ngIf="dissmis==false">
    <ion-card-content *ngFor="let f of selectedFruits; let i = index">
      <h1>{{i+1}}) {{f}}</h1>
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="dissmis==true">
    <ion-card-content>
      <ion-select
        [multiple]="true"
        aria-label="Fruit"
        placeholder="Select fruit"
        (ionChange)="handleChange($event)"
        (ionCancel)="pushLog('ionCancel fired')"
        (ionDismiss)="pushLog('ionDismiss fired')">
        <ion-select-option value="{{f.value}}" *ngFor="let f of fruits">{{f.text}}</ion-select-option>
      </ion-select>
    </ion-card-content>
  </ion-card>

</ion-content>

In your component's TypeScript code, define the function that will be called when the ionChange event is triggered. This function should accept an event object as its argument, which contains the new value selected by the user. For example:

Create data of array

To use an array with object types in TypeScript, you can follow these steps:

1. Define an interface or a class for the object type you want to store in the array. This will allow TypeScript to enforce type checking and ensure that only objects of the specified type are added to the array.

For example, let's say we want to store objects representing cars in our array. We could define an interface for this as follows:

Declare an array variable with the type of the objects you want to store. In this case, we want to store objects of type fruits, so we would declare the array like this:
This declares an empty array of type fruits[], which means it can only contain objects that match the fruits interface we defined earlier.

Add objects to the array. To add a new fruits object to the array, you would create a new object that matches the fruits interface, and then push it onto the array:

home.page.ts

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

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

  logs: string[] = [];
  selectedFruitsText = '0 Items';
  selectedFruits: string[] = [];
  selectedOption: any;
  dissmis = true;

  fruits: any[] = [
    { text: 'Apple', value: 'apple' },
    { text: 'Apricot', value: 'apricot' },
    { text: 'Banana', value: 'banana' },
    { text: 'Blackberry', value: 'blackberry' },
    { text: 'Blueberry', value: 'blueberry' },
    { text: 'Cherry', value: 'cherry' },
    { text: 'Cranberry', value: 'cranberry' },
    { text: 'Grape', value: 'grape' },
    { text: 'Grapefruit', value: 'grapefruit' },
    { text: 'Guava', value: 'guava' },
    { text: 'Jackfruit', value: 'jackfruit' },
    { text: 'Lime', value: 'lime' },
    { text: 'Mango', value: 'mango' },
    { text: 'Nectarine', value: 'nectarine' },
    { text: 'Orange', value: 'orange' },
    { text: 'Papaya', value: 'papaya' },
    { text: 'Passionfruit', value: 'passionfruit' },
    { text: 'Peach', value: 'peach' },
    { text: 'Pear', value: 'pear' },
    { text: 'Plantain', value: 'plantain' },
    { text: 'Plum', value: 'plum' },
    { text: 'Pineapple', value: 'pineapple' },
    { text: 'Pomegranate', value: 'pomegranate' },
    { text: 'Raspberry', value: 'raspberry' },
    { text: 'Strawberry', value: 'strawberry' },
  ];

  private formatData(data: string[]) {
    if (data.length === 1) {
      const fruit = this.fruits.find((fruit) => fruit.value === data[0]);
      return fruit.text;
    }
    this.selectedFruits = data;
       console.log(this.selectedFruits);
    
    return `${data.length} items`;
  }

  private handleChange(e: any) {
    this.selectedFruits = e.detail.value;
    this.selectedFruitsText = this.formatData(this.selectedFruits);
    this.dissmis=false;
       console.log(this.selectedFruitsText);
  }

  private pushLog(msg: any) {
    this.logs.unshift(msg);
  }
}

Here, we are using [(ngModel)] to bind the selected value of the ion-select component to the selectedOption property in our component.

I hope this helps you get started with using ion-select in Ionic 5. Let me know if you have any further questions!

1. Within the function, you can perform any necessary actions or update your application state based on the new value selected by the user. In the above example, we are simply logging the new value to the console.

That's it! With these steps, you can use ionChange to listen for changes to user input and update your application accordingly. Note that ionChange can also be used with input and range components in the same way as the select component.