How to show and hide a div with a checkbox element in Angular2?

Question

I've got a checkbox and what I'm trying to achieve is to hide the div when the checkbox is checked and show when it is unchecked in Angular 2.0 beta.

I know how to do this in angular 1.2 with this code

<label>
     <input type="checkbox" ng-model="showhidepregnant"/> Pregnant
</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Code on the div

<div class="col-md-4 divhidetxtdpatient" ng-hide="showhidemasked">
      <input class="form-control" tabindex="1" id="id_field_specialist" ng-model="id_field_specialist" type="text" ng-blur="savespecialist()" placeholder="maskable"/>
</div>

Thanks in advance.

Answer 1

You can also use the #variable syntax from Angular. checked (register.checked) is the property of the input element which returns the checked state of the element.

Note: the event-binding (checked) is needed to trigger the check for changes if the user has checked/unchecked the checkbox:

<div *ngIf="register.checked">
  <h1>Hallo</h1>
</div>
<label><input (change)="register" #register type="checkbox"> Register</label>