[Fixed] Hide and show element based on radio button selection?

Issue

How can we hide and show an element based on radio button selection? on the first view the div is hidden the problem is when I select any of the radio button the div is showing and it will never hide again when I click the no. what I want to achieve is when I click the radio button value true the div will show and when I click radio button false the div should be hidden.

<div class="form-group col-md-6">
    <div class="d-flex mb-2">
        <div>Do you have massage certificate ?</div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
        </div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="false" >
            No
            <span class="form-check-sign"></span>
            </label>
        </div>
    </div>
    <div *ngIf="has_cert">
        <input type="file" class="form-control-file custom" id="cv">
    </div>
</div>

Solution

The issue here is you are setting value as "true" and "false" as string type. So, in ngIf the string is not empty. Hence, it is getting shown always. Use binding syntax like below:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="form-group col-md-6">
  <div class="d-flex mb-2">
    <div>Do you have massage certificate ?</div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
    </div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="false" >
            No
            <span class="form-check-sign"></span>
            </label>
    </div>
  </div>
  <div *ngIf="has_cert">
    <input type="file" class="form-control-file custom" id="cv">
  </div>
</div>