I would like to show and hide addtional input fields depending on a radio button value.

Radio

<div class="form-group">
  <label>Was möchten Sie bewerten?</label>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value="ETW">Eigentumswohnung</label>
            </div>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value= "EFH">Einfamilienhaus</label>
            </div>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value="ZFH">Mehrfamilienhaus</label>
            </div>
  </div

This form/elemnt I would like to show if the value of type is "EFH" or "ZFH"

  <div *ngIf="" class="form-group">

I would like to show and hide addtional input fields depending on a radio button value.

Radio

<div class="form-group">
  <label>Was möchten Sie bewerten?</label>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value="ETW">Eigentumswohnung</label>
            </div>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value= "EFH">Einfamilienhaus</label>
            </div>
            <div class="radio">
              <label><input type="radio" [(ngModel)]="type" name="type" value="ZFH">Mehrfamilienhaus</label>
            </div>
  </div

This form/elemnt I would like to show if the value of type is "EFH" or "ZFH"

  <div *ngIf="" class="form-group">

• javascript
• html
• forms
• angular
• angular-ng-if

1 Answer 1

As your radio buttons are binded to some property using ngModel, you can use your radio buttons model property to check (show/hide) the div's.

Example :

  <div *ngIf="type == 'EFG' || type == 'ZFH'" class="form-group">