Angular unable to make checkbox checked

Question

Hi I am developing angularjs application. I have list of checkbox's displayed. I have below code.

 <div class="checkbox" id="checkboxes" style="display:block"   *ngFor="let rolename of roles; let i = index">
           <input type="checkbox"
           name="roles.rolename"
           value="rolename.roleid"
           [(ngModel)]="rolename.ischecked"/>
           {{rolename.rolename}}
           {{rolename.ischecked}}
  </div>

Whenever there is ischecked true then i want to make checkbox checked. So i set ischecked property to model itself. Currently this is not happening.

Below is sample data i applied.

[
   {
      "roleid":"666c01aa-5272-40bc-a888-5edac9087aad",
      "ischecked":"false",
      "rolename":"Observer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"4df4bf2f-16b0-482a-84c1-7a646bbfcf71",
      "ischecked":"true",
      "rolename":"Operator",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"be2cc996-e3a6-4736-ad19-b794ff04581e",
      "ischecked":"false",
      "rolename":"Supervisor",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"6c0f9539-a7fb-4050-92a3-bc80975e1c7d",
      "ischecked":"false",
      "rolename":"ConfigureAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"46476a49-f315-4a56-ba90-e4ed6a24d0d5",
      "rolename":"Engineer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"77c5f7e6-5f80-47c5-a3f5-f4dba4af41d1",
      "ischecked":"false",
      "rolename":"SecurityAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   }
]

Can someone help me to make this works? Any help would be appreciated. Thank you

https://stackoverflow.com/questions/38504449/set-checked-status-on-input-type-checkbox-in-ngfor-angular-2 — misterti, Jan 12 '18 at 10:23
Thanks but my scenario is different. I have property ischecked that will give us true/false. — Giridhar Joshi, Jan 12 '18 at 10:30
It's the same thing, example also returns true/false. Just set [checked]="rolename.ischecked" — misterti, Jan 12 '18 at 10:42
ok thanks. i will try it out. but what property has to set for model? — Giridhar Joshi, Jan 12 '18 at 10:46
It worked after adding [checked]="rolename.ischecked and removing [(ngModel)]="rolename.ischecked". But when i check another role and click on save i get ischecked true only for old role. currently checked role gives me false only. How can i make it two way binding? — Giridhar Joshi, Jan 12 '18 at 13:48

score 2 · Accepted Answer · answered Jan 12 '18 at 14:35

2

To have checkbox checked and have a two-way binding in Angular 2+

<input type="checkbox" name="roles.rolename" value="rolename.roleid" [checked]="rolename.ischecked" (change)="rolename.ischecked = !rolename.ischecked" />

Also read this post for further options: Angular 2 Checkbox Two Way Data Binding

answered Jan 12 '18 at 14:35

misterti

615
6
15

This worked like charm. I am trying to fix it from last two days. I spent almost 2 days to this. Thank you Misterti. – Giridhar Joshi Jan 12 '18 at 14:44
I suggest you start using Ionic Framework, if you are making a mobile app. It runs on Angular platform, but it has a much more simplified structure and comes with lots of pre-made user interface components. And you can also mix code with standard html components – misterti Jan 12 '18 at 14:55

Angular unable to make checkbox checked

1 Answers1