Build The Ionic App With Radio Button Classes In Visual Studio 2015

Before reading this article, please go through the article links given below.

• QuickStart On Apache Cordova Using Visual Studio 2015
• UsingIonic Blank App Using Visual Studio 2015
• UsingIonic Side Menu App Using Visual Studio 2015
• UsingIonic Tabs App Using Visual Studio 2015
• WorkingWith Color Classes In Ionic Blank App Using Visual Studio 2015
• WorkingWith Button Class In Ionic Blank App Using Visual Studio 2015
• Working With Ionic Toggle Classes In Ionic Blank App Using Visual Studio 2015
• Working With Ionic List Item Class In Ionic Blank App using Visual Studio 2015
• Using Range Classes In Ionic Blank App Using Visual Studio 2015
• Working With Ionic Check Box Class In Ionic Blank App Using Visual Studio 2015

Apache Cordova

Apache Cordova is an open source project that aims at allowing mobile developers to build applications for all the major mobile platforms, using HTML, CSS and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK that helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS and JavaScript.

Building Ionic Blank app with different Ionic Radio Classes in Visual Studio 2015

Let's see how Ionic framework makes the use of Ionic Radio button.
A Radio button is a graphical control. It allows the user to choose only one of a group of options.When a user clicks on one Radio button, that particular button is checked and all the remaining in the same group becomes unchecked.

Ionic Radio class properties



In Radio button classes, we have the contents, mentioned below.

>item-radio	Its used to add the radio button inside the Items
>radio-content	Its used to add the content for the Radio button.
>radio-icon	Its used to add the icon for the Radio button.

Ionic framework offers different types to make their usage easy. Let’s see how to use the Ionic Radio button classes with Ionic Blank apps.

Prerequisites

• Visual Studio 2015.
• Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to use Ionic Radio button classes in Ionic Blank apps, using Ionic framework.

Step 1 Create an Ionic Blank App

Let’s get ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project Option to create Ionic Blank apps, using Ionic framework.



Step 2 Giving the Project Name

Subsequently, a New Project Window will open, where you can select an Installed -> Template -> Java Script -> Apache Cordova apps ->Ionic JavaScript Blank.

Type Project Name Ionic-RadiobuttonApp and click OK button.



Step 3

Main screen is shown below.



Step 4

Adding Ionic Radio Button

Go to the solution bar and choose index.html. This is the starting screen of your app. We can add our HTML coding here.

1. Creating the Ionic Radio button
   
   In HTML, we use label, input tag and Ionic Radio button classes to add Radio button.
   
   Explanation
   
   In the example mentioned below, we get the gender from the user. Thus, we are using Radio button with label, input tags
   
   Coding
   

   <label class="radio-content">
   <input type="radio">Male
   </label> <br/> <br/> <label class="radio-content">
   <input type="radio">Female
   </label>

   
   
   
2. Ionic Multiple Radio Button
   
   You can add multiple Ionic Radio buttons to fit in the container. This will add some margin to it and it will adjust Radio button size to your container. Here, we are using div, label and an input tag
   
   Explanation
   
   In the example mentioned below, we get the gender from the user. In the previous example, we used separate Radio button. We can select both at a time but here, we make it as a group (group1). Thus, we select only one from the group.
   
   Coding
   

   <div class="list"> <label class="item radio-content">
   <input type="radio" name="group1" />
   Delhi
   </label> <label class="item radio-content">
   <input type="radio" name="group1" />
   Mumbai
   </label> <label class="item radio-content">
   <input type="radio" name="group1" />
   Bangalore
   </label> <label class="item radio-content">
   <input type="radio" name="group1" />
   Chennai
   </label> </div>

   
   
   
3. Adding Multiple Ionic Radio button
   
   We can also use different groups of Radio buttons in a single page. For it, we will use item-divider class to separate the groups. We split it and gave different names to the groups like (gender, qualification and location).
   
   Explanation
   
   In the example mentioned below, we use item-divider to split the group. The first group is for getting the gender details and the second group is getting the job location details.
   
   Coding
   

   <div class="list">
       <div class="item item-divider"> Enter your Gender </div> <label class="item radio-content">
   <input type="radio" name="group1" />
   Male
   </label> <label class="item radio-content">
   <input type="radio" name="group1" />
   Female
   </label> </div>
   <div class="list">
       <div class="item item-divider"> Enter your Job Location </div> <label class="item radio-content">
   <input type="radio" name="group2" />
   Hydrabed
   </label> <label class="item radio-content">
   <input type="radio" name="group2" />
   Pune
   </label> <label class="item radio-content">
   <input type="radio" name="group2" />
   Bangalore
   </label> <label class="item radio-content">
   <input type="radio" name="group2" />
   Chennai
   </label> </div>

   
   

Step 5

Run the Application

Now, we are ready to run our Project. Click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).



Output

Main Screen is shown below.



Output 1

After adding Ionic Radio button control, the output looks, as shown below.



Output 2

Adding Multiple Radio button will give the output, which is shown below.



Output 3

Apply different groups of Radio buttons.



Conclusion

I hope you understood how to use the Ionic Radio button classes in the Ionic blank app, using Visual Studio 2015 and how to run it.