CODEWITHSUNDEEP
angularcheckbox
Giridhar Joshi
Giridhar Joshi

Reputation: 93

Angular unable to make checkbox checked

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

Upvotes: 0

Views: 2664

Answers (1)

misterti
misterti

Reputation: 635

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

Upvotes: 2

Related Questions