How to Show/Hide DIV based on Selection of Radio Button using Angular

Show hide div on click of radio button in angular

How to Solve:

In this article I will explain with an example, How to Show/Hide DIV based on Selection of Radio Button using Angular.

When the Radio Button value changes, the HTML DIV will be shown and when again the same Radio Button value changed the HTML DIV will be hidden.

Show/Hide Div based on Radio Button value using Angular

The HTML Markup consists of a HTML RadioButton and HTML DIV. When the RadioButton value changed, based on value of the Radio button i.e. Male or Female, the HTML DIV will be toggled.

Use The Code:

<input name="gender" [(ngModel)]="gender" type="radio" value="male" /> Male
<input name="gender" [(ngModel)]="gender" type="radio" value="female"/> Female

<div *ngIf="gender == 'male'">I'm Male</div>
<div *ngIf="gender == 'female'">I'm Female</div>

Result:

Referances:

https://stackoverflow.com/questions/45286978/angular2-show-hide-section-on-selection-of-radio-button