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

Radios should be used inside of a radio group. Pressing a radio will check it and uncheck the previously selected radio, if there is one. They can also be checked programmatically by setting the value property of the parent radio group to the value of the radio.

When radios are inside of a radio group, only one radio will be checked at any time. If more than one item should be selected, checkboxes should be used instead. Radios can be disabled within a group to prevent interaction with them.

To use ion-radio in Ionic 7, you need to follow these steps:

1. Import IonRadioModule in the module where you want to use ion-radio. You can import it like this:

2. In your component's HTML template, use the ion-radio tag to create a radio button. For example:

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="tertiary">
    <ion-title>
      Ion-radio
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card>
    <ion-card-header>
      <ion-card-title>Choice your favorite fruit</ion-card-title>
      <ion-card-subtitle color="danger">{{selectedFruit}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-radio-group [(ngModel)]="selectedFruit" (ionChange)="getOptionValue($event)">
          <ion-item>
            <ion-radio value="apple"></ion-radio>
            <ion-label>Apple</ion-label>
          </ion-item>
    
          <ion-item>
            <ion-radio value="banana"></ion-radio>
            <ion-label>Banana</ion-label>
          </ion-item>
      
          <ion-item>
            <ion-radio value="orange"></ion-radio>
            <ion-label>Orange</ion-label>
          </ion-item>
        </ion-radio-group>
      </ion-list>
      
    </ion-card-content>
  </ion-card>
</ion-content>

In the above example, we are creating a list of three radio buttons (Apple, Banana, and Orange). The ion-radio-group directive is used to group the radio buttons together. The [(ngModel)] binding is used to bind the selected value to a variable called selectedFruit.

1. In your component's TypeScript code, define a variable to hold the selected value. For example:

In this example, we have a ion-radio-group element containing two ion-radio elements, each with a different value. We are using two-way data binding with ngModel to bind the selected option to a property called selectedOption in the component.

When the user selects an option, the ionChange event is fired, and we pass the event object to a method called getOptionValue as a parameter. In the getOptionValue method, we can access the selected value using event.detail.value and perform any necessary operations with it.

Here's an example implementation of the getOptionValue method:

home.page.ts

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

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

  constructor() {}

  getOptionValue(event: any) {
    // prints the selected value to the console
    console.log(event.detail.value); 
  }
}

In the above example, we are initializing the selectedFruit variable to 'apple'.

That's it! Now you have a working example of ion-radio in Ionic 7. When the user selects a radio button, the selectedFruit variable will be updated with the value of the selected radio button.

Costum css

home.page.css

ion-radio::part(container) {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid #ddd;
}

ion-radio::part(mark) {
  background: none;
  transition: none;
  transform: none;
  border-radius: 0;
}

ion-radio.radio-checked::part(container) {
  background: #6815ec;
  border-color: transparent;
}

ion-radio.radio-checked::part(mark) {
  width: 6px;
  height: 10px;
  border-width: 0px 2px 2px 0px;
  border-style: solid;
  border-color: #fff;
  transform: rotate(45deg);
}
ion-label {
  margin-left: 20px !important;
}

This method simply logs the selected value to the console, but you can replace this with any code you need to execute with the selected value.