Angular 12 Show / Hide Div On Radio Button Click Tutorial

This quick guide will explain how to hide and show HTML div on Radio button click in Angular application using the template-driven method.

A radio button is a graphical control form element, mainly used for selecting one option among mutually exclusive options.

This quick example will help you find the simple way to change the HTML div state from hide to show. We will show you a thorough example of angular show hide div on the radio button click from scratch.

How to Hide and Show Div on Radio Button Click in Angular

  • Step 1: Set Up Angular App
  • Step 2: Add Forms Module
  • Step 3: Implement Show Hide
  • Step 4: Update CSS
  • Step 5: View App in Browser

Install Angular CLI

Ensure that you have installed the node runtime environment and npm package manager on your development system.

npm install -g @angular/cli

Create Angular App

Let us create the new angular app with the help of the provided command.

ng new ng-blog

Get into the project folder.

cd ng-blog

Add Forms Module

To work with radio buttons, you must install the forms module into the app.module.ts file.

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [FormsModule],
  providers: [],
  bootstrap: []
})

export class AppModule { }

Implement Show Hide

In this step, we will be showing you how to add show hide functionality in angular, consequently open the app.component.ts and insert the provided code.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  
  isVisible: any;
  isSelected: boolean = true;
  
  ngOnInit() {}
   
}

Set the HTML div in the component’s HTML template, and two radio buttons will handle the div state.

The pre-defined state is hidden; when clicking on the show, div will appear and hide when clicked on the hide radio button.

Add code in app.component.html file.

  <label>
    <input 
      [value]="1" 
      [(ngModel)]="isVisible" 
      name="isVisible" 
      type="radio" 
      [checked]="isSelected"/> Show
  </label>

  <label>
    <input 
      [value]="0" 
      [(ngModel)]="isVisible" 
      name="isVisible" 
      type="radio" 
      [checked]="!isSelected"/> Hide
  </label>

  <div class="showDiv" *ngIf="isVisible == 1"></div>
  <div class="hideDiv" *ngIf="isVisible == 0"></div>

Update CSS

Now that everything is set, just open the app.component.scss file and add some CSS.

.showDiv {
   background-color: aqua;
   height: 200px;
   width: 500px;
}

.hideDiv {
   display: none;
}

Start Angular App

Finally, type command on the command prompt and hit enter to start the angular development server.

ng serve

Use the url to view and test the app.

http://localhost:4200

Angular 12 Show / Hide Div On Radio Button Click Tutorial

Summary

Throughout this swift example, we uncovered all the significant steps which were helpful to create a hide show HTML div feature in angular with the help of the radio buttons.

We reckon you would like this tutorial and share it with other devs.