Angular Show Hide Div on Radio Button Example

Hello,

This tutorial is focused on show hide div based on radio button selection angular. you will learn angular show hide div on radio button. i explained simply step by step how to show hide div by clicking radio button angular. i would like to share with you angular show hide div on radio button. Alright, let’s dive into the steps.

Here will be very simple example of hide show div based on radio button selection using ngIf in angular 6, angular 7, angular 8 and angular 9 application.

Let's see bellow template code so you can understand bellow:

Example:

<h1>show hide div on click of radio button in angular - itsolutionstuff.com</h1>
   
<input name="type" [(ngModel)]="type" type="radio" [value]="1" [checked]="options"/> Admin
<input name="type" [(ngModel)]="type" type="radio" [value]="0" [checked]="!options"/> User
  
<h2 *ngIf="type == 1">Admin</h2>
<h2 *ngIf="type == 0">User</h2>

Let's see bellow layout:

I hope it can help you...