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.

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 

  1. import { Component } from '@angular/core';  
  2.   
  3.   
  4. @Component({  
  5.     selector: my-app',  
  6.     templateUrl: './app/radiobuttoneg.html'  
  7.       
  8. })  
  9. export class AppComponent {  
  10. }   

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 

  1. <div class="radio">  
  2.             <label>  
  3.                 <input type="radio" name="gender" value="Male" [checked]='true' ngModel>  
  4.                 Male  
  5.             </label>  
  6.         </div>  
  7.         <div class="radio">  
  8.          <label>  
  9.                 <input type="radio" name="gender" value="Female" ngModel>  
  10.                 Female  
  11.             </label>  
  12.         </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 

  1. <div class="radio">  
  2.             <label>  
  3.                 <input type="radio" name="gender" value="Male" (click)="setradio('Male')" [checked]='true' ngModel>  
  4.                 Male  
  5.             </label>  
  6.         </div>  
  7.         <div class="radio">  
  8.             <label>  
  9.                 <input type="radio" name="gender" value="Female" (click)="setradio('Female')" ngModel>  
  10.                 Female  
  11.             </label>  
  12.         </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” 

  1. <div *ngIf="isSelected('Male')" >  
  2.    <input type="text"/>Male radio button selected  
  3.  </div>  
  4.   
  5.  <div *ngIf="isSelected('Female')">  
  6.     <input type="text"/> Female radio button selected  
  7.  </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 

  1. <div class="radio">  
  2.             <label>  
  3.                 <input type="radio" name="gender" value="Male" (click)="setradio('Male')" [checked]='true' ngModel>  
  4.                 Male  
  5.             </label>  
  6.         </div>  
  7.         <div class="radio">  
  8.             <label>  
  9.                 <input type="radio" name="gender" value="Female" (click)="setradio('Female')" ngModel>  
  10.                 Female  
  11.             </label>  
  12.         </div>  
  13.   
  14. <div *ngIf="isSelected('Male')" >  
  15.      <input type="text"/>Male radio button selected  
  16.    </div>  
  17.   
  18.    <div *ngIf="isSelected('Female')">  
  19.       <input type="text"/> Female radio button selected  
  20.    </div>   

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

  1. private selectedLink: string="Male";        
  2.   
  3.     setradio(e: string): void   
  4.   {  
  5.   
  6.         this.selectedLink = e;  
  7.           
  8.   }  
  9.   
  10.     isSelected(name: string): boolean   
  11.   {  
  12.   
  13.         if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown  
  14.             return false;  
  15.   }  
  16.   
  17.         return (this.selectedLink === name); // if current radio button is selected, return true, else return false  
  18.     }   

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 

  1. import { Component } from '@angular/core';  
  2.   
  3.   
  4. @Component({  
  5.     selector: my-app',  
  6.     templateUrl: './app/radiobuttoneg.html'  
  7.       
  8. })  
  9. export class AppComponent  
  10. {  
  11. private selectedLink: string="Male";        
  12.   
  13.   setradio(e: string): void   
  14.   {  
  15.   
  16.     this.selectedLink = e;  
  17.           
  18.   }  
  19.   
  20.     isSelected(name: string): boolean   
  21.   {  
  22.   
  23.         if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown  
  24.             return false;  
  25.   }  
  26.   
  27.         return (this.selectedLink === name); // if current radio button is selected, return true, else return false  
  28.     }  
  29.   
  30. }   

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.

radio buttons in Angular 2

radio buttons in Angular 2

Thank you for reading the article.

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