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.

Did you even try to find a solution in your own ? Have you a plunkr with your actual solution ? — Julien Alary, Feb 17 '16 at 07:49

score 11 · Answer 1 · edited Jun 14 '16 at 08:30

11

Provide [(ngModel)] for your checkbox and use the same ngModel using *ngIf for your div tag. See the below code sample.

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

Then use the same mode:

<div class="col-md-4 divhidetxtdpatient" *ngIf="showhidepregnant">

NB: Please declare the model in your .ts file also:

showhidepregnant: boolean;

edited Jun 14 '16 at 08:30

A J

3,970
14
38
53

answered Jun 14 '16 at 07:41

Renju

119
1
5

Can we use same format for the reactive forms on the angular – Prashanth Feb 18 '20 at 12:53

score 5 · Answer 2 · answered Sep 27 '17 at 10:34

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>

score 3 · Answer 3 · edited May 23 '17 at 11:46

Basically you need to use [hidden] property binding for showing and hiding HTML.

And then use [(ngModel)] for two way binding in Angular2 & use (eventName) to have event bounded to DOM.

Markup

<label>
   <input type="checkbox" [(ngModel)]="showhidepregnant"/> Pregnant
</label>

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

score 1 · Answer 4 · answered Feb 17 '16 at 07:49

you can check whether checkbox is checked or not by applying (change) hook on the basis of checkbox property try to hide or show div,

here is working plnkr for same:

http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

.ts file code:

checked(value){
    if(document.getElementById('abc').checked==true){
      this.shown= true
    }
    else if(document.getElementById('abc').checked==false)
      this.shown= false;
  }

.html

<input type='checkbox' id= 'abc' (change)="checked('abc')">

<div *ngIf='shown'>
  Hello CheckBox
</div>

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

4 Answers4