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
   
    <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.