*ngif Not working after first click. Angular 6

Question

What I want to Achieve is that I have a Select field in angular6 on the basis of the selected value I want to hide and display another div.

Here is the code.

 <div class="form-group">
          <label for="servicePriviledges">Managed</label>
          <select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
           <br>
        </div>

<div class="form-group" *ngIf="managed">
          <label for="managerType" >Manager Type</label>
          <select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
        </div>

*ngIf does make an impact when I switch it for the first time but not after that. the change is not detected.

I have even tried setting up the visibility attribute of style as well as [hidden] directive but got the same result.

I have even tried giving an on change method but no change in result.

version information:

"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",

Both these controls are under a form 'ngForm'.

Answer 1

Another approach is to attach [ngValue] directive for every option.

<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
    <option [ngValue]="false">False</option>
    <option [ngValue]="true">True</option>
</select>

Answer 2

managed will have a string value of 'true' or 'false' update ngIf like this

<div class="form-group" *ngIf="managed === 'true'">
 ...
 </div>

or you can use ngValue so managed will have a boolean value of true , false

 <select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
   <option [ngValue]="false">False</option>
   <option [ngValue]="true">True</option>
  </select>