Radio button binding using a template based form populating field according to radio button selection

Question

I have a form with three radio button. First one is selected by Default. Second one has to show a input field conditionally of clicking on it. And on selection of third option populates that input field with some value.

div>
      <h2>{{title}}</h2>
      <label class="form_label" for="account">Output Type</label>
      <div class="output_row_styles">
        <span><input type="radio" [value]="pdf" name="output"  (click)="outputType ='pdf'" [checked]="outputType =='pdf'"> PDF</span>
        <span><input type="radio" [value]="email" name="output" (click)="outputType ='email'" [checked]="outputType =='email'"> Email </span>
        <span><input type="radio" [value]="legal" name="output" (click)="outputType ='transfer'" [checked]="outputType =='transfer'"> Transfer</span>
      </div>
      <div *ngIf = "outputType == 'email' || outputType == 'transfer'" class="output_type_div">
          <div class="row_styles">
          <label class="form_label" for="recipient_email">Recipient E-mail address</label>
          <input type="text" [value]="outputType == 'transfer' ? '[email protected]' : ''" name="recipient_email" class="input-text"  [(ngModel)]="recipientEmailAddress"
            required/>
      </div>
    </div>

Clicking them in order i.e. (Second and then third) works fine. But selecting third when first one is selected dose not populates the field.

See Plunker :

Tried to find any related solution or questions but no help.

Answer 1

Can be a change detection issue. But not sure. You can use [hidden] instead:

<div [hidden] = "outputType != 'email' && outputType != 'transfer'" class="output_type_div">
          <div class="row_styles">
          <label class="form_label" for="recipient_email">Recipient E-mail address</label>
          <input type="text" [value]="outputType == 'transfer' ? '[email protected]' : ''" name="recipient_email" class="input-text"  [(ngModel)]="recipientEmailAddress"
        required/>
  </div>

Updated Plunker

Answer 2

Updated my code according to faisal's answer with more optimized code:

div>
      <h2>{{title}}</h2>
      <label class="form_label" for="account">Output Type</label>
      <div class="output_row_styles">
        <span><input type="radio" [value]="pdf" name="output"  (click)="outputType ='pdf'" [checked]="outputType =='pdf'"> PDF</span>
        <span><input type="radio" [value]="email" name="output" (click)="outputType ='email'" [checked]="outputType =='email'"> Email </span>
        <span><input type="radio" [value]="legal" name="output" (click)="outputType ='transfer'" [checked]="outputType =='transfer'"> Transfer</span>
      </div>
      <div [hidden] = "outputType == 'pdf'" class="output_type_div">
          <div class="row_styles">
          <label class="form_label" for="recipient_email">Recipient E-mail address</label>
          <input type="text" [value]="outputType == 'transfer' ? '[email protected]' : ''" name="recipient_email" class="input-text"  [(ngModel)]="recipientEmailAddress"
            required/>
      </div>
    </div>