Ionic 4 | Add Radio Lists in Radio Group Example and Tutorial

After the release of Ionic 4, the team has changed many of the UI component directives and properties. In this post, we will discuss Radio and Radio Group UI web components available in Ionic 4.

In Ionic 4 we can add Radio form fields by simply adding <ion-radio> directive in web component which is converted into a customized Radio element.

There is also another directive available Radio Group which is mainly used to group a set or list of Radio items on the component.

Here we assume that you already have already created Ionic 4 application if not then you can create a new Ionic 4 application in the latest version on Ionic CLI

Implementation on Radio Lists

Now open your home.page.html file then add the following HTML code

<ion-radio>

Used to create a single radio item with following available events and properties

Properties

checked: Default state of radio (true|false). Only one radio can be checked at a time.

color: Change color to available theme options | “primary”, “secondary”, “tertiary”, “success”, “warning”, “danger”, “light”

disabled: Set to true to disable the radio control

name: Used when form data need to be passed used as key

value: Used to pass form data used as value of key

Events

(ionBlur): Emitted when the radio button loses focus.
(ionFocus): Emitted when the radio button has focus.
(ionSelect): Emitted when the radio button is selected.

<ion-radio-group>

The radio group is used to wrap a set of radio items, to ensure only one item is selected. Following are some properties and events available on the radio group.

Properties

allow-empty-selection: If set to true, radio can be deselected like a checkbox.

name: Used when form data need to be passed used as a key

value: Used to pass form data used as the value of a key

Events

(ionChange): Emitted when the value has changed.

In home.page.ts file add radio listing object which is traversing over radio list using *ngFor.

To check any radio by default you can change value false to true in radio_list checked key.

Here we are also getting selected radio item value from radio group event (ionChange) and radio item using (ionSelect)

How to Select Ionic 4 Radio on Button Click Programmatically?

We can access Radio group using a # template variable then define it in component as @ViewChild using IonRadioGroup

Then in home.page.ts define @ViewChild

 

So here we discussed how to list radio items using radio group with all available events properties.

Leave a Reply

Your email address will not be published. Required fields are marked *