Show/Hide Div on Click of Radio Button using Angular and Bootstrap

Introduction

In this Article, We will learn steps to show and hide div by clicking on the Radio Button in the Angular application using the ngModel directive. Also, We learn about Bootstrap Toasts component implementation in Angular. It is a template-driven approach to create the radio buttons, bind the div to radio buttons, and hide and show after selecting.

Note: Before going through this session, please visit my previous article related to Angular applications as mentioned below.

Angular Application

Step 1. Import FormsModule in App Module

Import the forms module (FormsModule) in order to work with angular form and add in imports: [] array section. Find the below code in src/app/app.module.ts file.

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [Title],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2. Update HTML Template

Here we define the radio buttons, add the ngModel directive pass the value to it, and similarly define the checked state and values. Four divs were initially hidden and get into the visible state on radio button click. Find the code in src/app/app.component.html file. 

<div class="card bg-warning text-white">
<div class="card-body">
  <h2>Angular Radio Button Click For Show or Hide Div</h2>
    <input [value]="1" [(ngModel)]="sh" name="sh" type="radio" [checked]="isChecked" /> Satyaprakash
  &nbsp;
    <input [value]="0" [(ngModel)]="sh" name="sh" type="radio" [checked]="!isChecked" /> Kulu
  <div class="text-center card bg-success text-white" *ngIf="sh == 1">Satyaprakash</div>
  <div class="text-center card bg-danger text-white" *ngIf="sh == 0">Kulu</div>
</div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0; color: red;font-weight:900;font-size:larger;" *ngIf="sh == 1">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Satyaprakash
  </div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0;color: red;font-weight:900;font-size:larger;" *ngIf="sh == 0">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Kulu
  </div>
</div>

Here ngModel directive is implemented with radio buttons. 

<input [value]="1" [(ngModel)]="sh" name="sh" type="radio" [checked]="isChecked" /> Satyaprakash
  &nbsp;
<input [value]="0" [(ngModel)]="sh" name="sh" type="radio" [checked]="!isChecked" /> Kulu

For normal Div show or hide,

<div class="text-center card bg-success text-white" *ngIf="sh == 1">Satyaprakash</div>
<div class="text-center card bg-danger text-white" *ngIf="sh == 0">Kulu</div>

For Bootstrap Toast component,

<div class="toast show" style="position: absolute; top: 0; right: 0; color: red;font-weight:900;font-size:larger;" *ngIf="sh == 1">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Satyaprakash
  </div>
</div>

<div class="toast show" style="position: absolute; top: 0; right: 0;color: red;font-weight:900;font-size:larger;" *ngIf="sh == 0">
  <div class="toast-header">
    You Selected
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Kulu
  </div>
</div>

Step 3. Update TypeScript Template

Here we set the isChecked variable with false value. Make sure to define another variable by the name of “sh” in angular TypeScript component. Add the code in src/app/app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isChecked: boolean = false;
  sh: any;
  constructor() {
  }
}

Step 4. Add Bootstrap to make page responsive

Add code in index.html file,

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title Service Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Output

Here, we run the command (ng serve) to start the angular app server. 

The result is shown on first time page load,

Then it performs hide and show HTML div on radio buttons click in angular application with the help of ngModel directive.

How it performs is shown below,

Summary

In this write-up, we have learned the details below.

• Hide and show HTML div on radio buttons click in Angular application with the help of ngModel directive.
• Implement Bootstrap Toasts component in Angular

Thank You & Stay Tuned For More