If you're looking to create a list of Radio buttons easily, one method is using ngFor to iterate through an array list. Here's how I approached it:
Within the HTML template:
<ion-row radio-group formControlName="toppings">
<ion-col *ngFor="let topping of toppings" col-auto>
<ion-item>
<ion-radio item-left value="{{topping}}"></ion-radio>
<ion-label>{{topping}}</ion-label>
</ion-item>
</ion-col>
</ion-row>
In the component file:
toppings: ['bacon', 'black-olives'];
FormA:FormGroup;
this.FormA = this.formBuilder.group(
{ toppings:[''],Validators.required]});
I added an ion-row with the radio-group attribute in the HTML template and utilized formControlName tied to the Form Control. The ngFor loop allows for creating a column for each item in the toppings array with a RadioButton for each entry.
Ensure that the value property corresponds to your array values for functionality. This approach simplifies manual creation of Radio buttons.
To enhance code maintenance, I suggest storing arrays as constants in a separate file for application-wide use. By importing these arrays and assigning them to properties, any updates to the arrays will propagate throughout the application without changing multiple templates.
Example shared .ts file:
export const Toppings = ['bacon', 'cheese' , 'olives'];
export const Base = ['Thick', 'Thin' , 'Gluten Free'];
In your component file:
import { Toppings , Base } from 'location/of/your/file
//Use "=" when assigning constant arrays
toppings = Toppings;
base = Base;
Hopefully, this solution proves helpful for your development needs.