How to display HTML element based on radio input selection Using [(ngModel)] – Angular

To Hide/show a element based on the Radio input selection is can be achieved using ngModel Directive two way binding

1. First we need to import the form Module in our app module

app.module.ts

//Import Module
import { BrowserModule } from '@angular/platform-browser';
   
import { NgModule } from '@angular/core';
import {FormsModule}from '@angular/forms';

// Then add the import Module Name in import array section

 imports: [
    BrowserModule,
    FormsModule
  ],

2. Add [(ngmodel)] directive to the radio element as shown below and assign variable declare in ts file.

this variable can be used to add condition in html file

your.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
     <input [(ngModel)]="gender" type="radio" value="male"   />  Male
     <input [(ngModel)]="gender" type="radio" value="female"  />  Female
     
     <h2 *ngIf="(gender == 'male')"> Mr. ________</h2>
     <h2 *ngIf="(gender == 'female')"> Mrs./Ms. ________</h2>
  `,
  styles: [`   `]
})
export class TestComponent implements OnInit {
  public name = "Amey Raut";  
  public gender;  
  constructor() { }

  ngOnInit() {
  } 
  
}

3. There is another way to hide/show element using if-else as shown below

her we add else condition in ngIf block and then use ng-template to display else condition