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

In this article, you will learn how to add Ionic Radio button in the Ionic app, using Visual Studio 2015.

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

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

Visual Studio

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

>item-radio Its used to add the radio button inside the Items
>radio-contentIts used to add the content for the Radio button.
>radio-iconIts 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.

Visual Studio

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.

Visual Studio

Step 3

Main screen is shown below.

Visual Studio

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
    1. <label class="radio-content">   
    2. <input type="radio">Male   
    3. </label> <br/> <br/> <label class="radio-content">   
    4. <input type="radio">Female   
    5. </label>  
    Visual Studio

  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

    1. <div class="list"> <label class="item radio-content">   
    2. <input type="radio" name="group1" />   
    3. Delhi   
    4. </label> <label class="item radio-content">   
    5. <input type="radio" name="group1" />   
    6. Mumbai   
    7. </label> <label class="item radio-content">   
    8. <input type="radio" name="group1" />   
    9. Bangalore   
    10. </label> <label class="item radio-content">   
    11. <input type="radio" name="group1" />   
    12. Chennai   
    13. </label> </div>  
    Visual Studio

  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
    1. <div class="list">  
    2.     <div class="item item-divider"> Enter your Gender </div> <label class="item radio-content">   
    3. <input type="radio" name="group1" />   
    4. Male   
    5. </label> <label class="item radio-content">   
    6. <input type="radio" name="group1" />   
    7. Female   
    8. </label> </div>  
    9. <div class="list">  
    10.     <div class="item item-divider"> Enter your Job Location </div> <label class="item radio-content">   
    11. <input type="radio" name="group2" />   
    12. Hydrabed   
    13. </label> <label class="item radio-content">   
    14. <input type="radio" name="group2" />   
    15. Pune   
    16. </label> <label class="item radio-content">   
    17. <input type="radio" name="group2" />   
    18. Bangalore   
    19. </label> <label class="item radio-content">   
    20. <input type="radio" name="group2" />   
    21. Chennai   
    22. </label> </div>  
    Visual Studio

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).

Visual Studio

Output

Main Screen is shown below.

Visual Studio

Output 1

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

Visual Studio

Output 2

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

Visual Studio

Output 3

Apply different groups of Radio buttons.

Visual Studio

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.