Setting radio or checkbox button pre-selected:

Here we learn “How we set radio or checkbox button pre-selected in ionic3“, in this article we set the radio button or checkbox preselected.

So if we want to set one radio box pre-selected, then we use [ngModel], so letʼs start.

Output example –

Follow these steps for keep radio or checkbox button pre-selected.

Step 1:

Firstly we declare a variable.

support_further_education: any= male;

Step 2:

Here we need to implement the code, in which page you want to implement the code.

<ion-row radio-group [(ngModel)]="support_further_education">
<ion-label>Male</ion-label>

<ion-radio value="male" item-left class="mg_right_col2"></ion-radio>
<ion-label>Female</ion-label> 

<ion-radio value="female" item-left class="mg_right_col2"></ion-radio>

Step 3: How can I use a ngModel on an ion-checkbox for pre-selection.

So here we use ngModel for selecting a checkbox.

my_position: any = []; 

for(let postion of this.posts)//position is array 
 { 
  for(let sel_postion of current_selected_position)
  {  //and current_selected_position is array of that position which 
   we want to put pre-selected
 if(postion['id']==sel_postion['sp_position_id'])
 {  //this if match the condition on behalf of id 
  this.my_position.push(postion['idʼ])//Now we push that selected id 
 } 
}

Step 4:

Now we implement the design part of app.

<ion-item> 
 <ion-select [(ngModel)]="my_position" cancelText="cancel"
  okText="ok" multiple="true"><ion-option value="{{position.id}}" 
  *ngFor="let position of specilist_position”>
  {{position.title}} </ion-option>
 </ion-select>
</ion-item>

Why i choose ionic –

I’m a big fan of ionic with angular, because it is very easy to implement complicated concepts and designs, in above example i am explain you in detail how to create a very simple radio box checked.

So we complete the tutorial which is “How we set radio or checkbox button pre-selected in ionic3“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.