Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Checkbox checked if boolean is true with Angular2

I would like to know how to make a checkbox checked if the value is true, and unchecked if false with Angular2.

Adult <input type="checkbox" value="{{person.is_adult}}">

{{person.is_adult}} is a boolean

Can someone please suggest anything? Thanks

like image 311
jiji Avatar asked Aug 30 '16 16:08

jiji


2 Answers

{{}} does string interpolation and stringifies true and false and Angular by default uses property binding and I assume the property expects boolean values not strings:

<input type="checkbox" [checked]="person.is_adult">

This might work as well

<input type="checkbox" attr.checked="{{person.is_adult}}">

because with attribute binding the browser might translate it from the attribute (which can only be strings) to boolean when reading it into its property.

It is also checked instead of value

You can also use ngModel

<input type="checkbox" [ngModel]"person.is_adult" name="isAdult">
<input type="checkbox" [(ngModel)]"person.is_adult" name="isAdult">

for one-way or two-way binding.
Ensure your have the FormsModule imported if you use ngModel.

like image 139
Günter Zöchbauer Avatar answered Oct 31 '22 19:10

Günter Zöchbauer


you are missing square bracket around checked

<input type="checkbox" [checked]="person.is_adult">

Hope this helps!!

like image 33
Madhu Ranjan Avatar answered Oct 31 '22 19:10

Madhu Ranjan