Bind Click Event For Radio Buttons In Angular 2

Introduction

This article explains how to create radio buttons in Angular 2 and use event binding to show or hide textboxes based on a selected radio button.

I will be using Visual Studio as IDE and start with the project. If you are not sure how to start with Angular 2 projects using Visual Studio, have a look at the following article.

• Getting Started With Angular 2 Application Using Visual Studio 2015

After creating the project in VS 2015, you will find app.component.ts file where we will be calling the external HTML file that has the code for creating radio buttons.

 app.component.ts 

import { Component } from '@angular/core';


@Component({
    selector: my-app',
    templateUrl: './app/radiobuttoneg.html'

})
export class AppComponent {
}

Create an HTML page template which holds 2 radio buttons in the page. If you are not sure in which folder you have to create it, please refer to the following article

Radiobuttoneg.html 

<div class="radio">
            <label>
                <input type="radio" name="gender" value="Male" [checked]='true' ngModel>
                Male
            </label>
        </div>
        <div class="radio">
         <label>
                <input type="radio" name="gender" value="Female" ngModel>
                Female
            </label>
        </div>

Here in the above code we have created 2 radio buttons with value set as “Male” and “Female” respectively and made gender “Male”  selected default radio button.

[checked]='true' in the above code represents that the radiobutton is the selected by default.

Bind Click event for radio button in Angular 2

As per the introduction in the article, we will be adding the click event to the radiobutton and based on the radio button selection we will show or hide textbox respectively.

Add click event (click)="setradio('Male')" to the respective radio button as shown in the below code in “Radiobuttoneg.html” page.

Code 

<div class="radio">
            <label>
                <input type="radio" name="gender" value="Male" (click)="setradio('Male')" [checked]='true' ngModel>
                Male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="Female" (click)="setradio('Female')" ngModel>
                Female
            </label>
        </div>

In the function “setradio” click event we will pass either ‘’Male’ or ‘Female’ as a parameter in order to know which radio button is clicked.

Now it’s time to add code in “Radiobuttoneg.html” html page to display 2 textboxes and write our code for the click event function in the component class to show/hide the textboxes based on radio button selection.

Add Code in “Radiobuttoneg.html” 

<div *ngIf="isSelected('Male')" >
   <input type="text"/>Male radio button selected
 </div>

 <div *ngIf="isSelected('Female')">
    <input type="text"/> Female radio button selected
 </div>

In the above you might have noticed *ngIf which is a built in directive *used to show/hide the textbox based on radio button selection.

This is how our final html page will look like.

Final code for “Radiobuttoneg.html” page 

<div class="radio">
            <label>
                <input type="radio" name="gender" value="Male" (click)="setradio('Male')" [checked]='true' ngModel>
                Male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="Female" (click)="setradio('Female')" ngModel>
                Female
            </label>
        </div>

<div *ngIf="isSelected('Male')" >
     <input type="text"/>Male radio button selected
   </div>

   <div *ngIf="isSelected('Female')">
      <input type="text"/> Female radio button selected
   </div>

Now open “app.component.ts” file and to handle click event function call in AppComponent class to show/hide the text box 

private selectedLink: string="Male";

    setradio(e: string): void
  {

        this.selectedLink = e;

  }

    isSelected(name: string): boolean
  {

        if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown
            return false;
  }

        return (this.selectedLink === name); // if current radio button is selected, return true, else return false
    }

Let’s understand what the above code does, we have created a variable selectedLink to hold the string value in the setradio function which is sent from the html page.

Here isSelected(name: string): boolean function returns either true or false based on radio button selected.

Final Code for app.component.ts file 

import { Component } from '@angular/core';


@Component({
    selector: my-app',
    templateUrl: './app/radiobuttoneg.html'

})
export class AppComponent
{
private selectedLink: string="Male";

  setradio(e: string): void
  {

    this.selectedLink = e;

  }

    isSelected(name: string): boolean
  {

        if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown
            return false;
  }

        return (this.selectedLink === name); // if current radio button is selected, return true, else return false
    }

}

Summary

Run the code by pressing F5 in Visual Studio 2015 IDE you can see the output as below screenshot. By default Male Radio button is selected so it’s respective textbox is shown and when you click on Female radio button, textbox related to the radio button will be shown by hiding textbox provided for Male radio button.

Thank you for reading the article.

In case of any feedback or issues, please comment below.