Angular Checkbox in *ngFor

Question

I'm using KendoUI with Angular7 and am trying to get a dynamic list of checkboxes with bound check state. Here is the basic html for this list:

  <div *ngFor="let option of RoleOptions">
    <input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto">
    <label class="dialogLabels k-checkbox-label">{{option.Role.Name}}</label>
  </div>

This displays just fine and I get a stacked list of checkboxes with the various names in the label, but I can't check anything. I also have some logic that pre-checks certain ones and I can set that at will and it properly reflects the check state of the boxes when it comes up, but still won't let me change it.

I also have this line above it:

<input type="checkbox" class="k-checkbox" [(ngModel)]="NewUserSendEmail" id="cbEmail" style="width: auto">
<label class="dialogLabels k-checkbox-label" for="cbEmail"> Email login data to the user</label>

That works fine, lets me bind, and lets me check, etc. I can only see 2 differences.

First, the ones in the ngfor don't have an id for the label to associate with or anything else to find. However, I didn't find anything that an id is required and there are many examples on the Kendo page that show examples of checkboxes without ids so I don't think that's the issue (but certainly could be wrong).

Second, they are in the ngFor loop. I don't know why this would mess it up but it's all I can think of. I googled around but couldn't find anything about an issue here or how to fix it.

Any ideas where I'm going wrong or what I'm not seeing? I did log the objects that it's binding to and the value is true/false (not null or undefined) so that shouldn't be an issue. Not sure where else to look...

EDIT

After a little more research, this is definitely something to do with the Kendo style. If I do it like this:

    <div *ngFor="let option of RoleOptions">
      <label class="dialogLabels">
        <input type="checkbox" [(ngModel)]="option.Selected" style="width: auto">
        {{option.Role.Name}}</label>
    </div>

It works, but obviously doesn't have the Kendo look. How can I get a dynamic list of checkboxes with the same look as the rest of the app?

score 2 · Answer 1 · answered Apr 03 '20 at 20:44

2

NgModel doesnt work on Checkboxes by default.

Have a look at: Angular 2 Checkbox Two Way Data Binding

You could either bind your value to checked and implement a shorthand toggle method like this:

<input
  type="checkbox"
  [checked]="option.Selected"
  (change)="option.Selected = !option.Selected"/>

Or use ngModel with ngmodeloptions like so:

<input
  type="checkbox"
  [(ngModel)]="option.Selected"
  [ngModelOptions]="{standalone: true}"/>

answered Apr 03 '20 at 20:44

kacase

1,993
1
18
27

Why would it work on the one above that then for user email? – sfaust Apr 03 '20 at 20:53
I think it might have something to do with the ngFor, as the ngModel behaves differently in there. – kacase Apr 03 '20 at 21:00
Unfortunately neither of those work either. Still just doesn't let me check anything. – sfaust Apr 03 '20 at 21:39
Worst case you create a non working kendo checkbox and copy the styles over to your own native angular checkbox. – kacase Apr 04 '20 at 09:39

score 2 · Accepted Answer · answered Apr 08 '20 at 15:31

Ok so I'm still not sure why this wasn't working the way I had it; regardless of what I did (even copying styles) it didn't seem to respond to the click and change the check state. However, after a little help from Telerik/Progress I found another way to do it that's working.

The checkbox that is outside the *ngfor and is working uses the id attribute and the label's 'for' attribute to associate. I originally didn't see a way to do that with dynamically generated objects because the id can't be static or you have a bunch of items with the same id. I did try using a {{}} biding to make the id unique but it didn't work. However I found there is an [id] binding that does work. I then found the [htmlFor] binding for the label. Using these in combination seems to work properly.

So my final code is:

<div *ngFor="let option of RoleOptions">
    <input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto" [id]="option.Role.Id">
    <label class="dialogLabels k-checkbox-label" [htmlFor]="option.Role.Id">{{option.Role.Name}}</label>
</div>

Hopefully it helps someone else. If anyone has any other ideas on why the first system wasn't working I would be interested to know...

Angular Checkbox in *ngFor

2 Answers2