Creating a list of checkboxes with ngFor Angular

Question

I have a list of objects that's structured like this:

[{item},{item},{item}]

I'm trying to create a list of checkboxes with angular out of this list like this:

<form>
     <input *ngFor="let object of objects" type="checkbox"> {{object.name}}
</form>

The checkboxes themselves do show up, but I can't get the name of the object to show with each checkbox. What am I doing wrong?

score 6 · Answer 1 · answered Jul 02 '18 at 09:10

6

You can use check box with *ngFor as follows.

<form>
   <div *ngFor="let object of objects">
      <input type="checkbox" [checked]="object.checked"> {{object.name}}
   <div>
</form>

answered Jul 02 '18 at 09:10

Akj

7,038
3
28
40

score 2 · Answer 2 · answered Jul 02 '18 at 08:10

The object variable only exist in the context of the ngForOf, in your case, this is the context of the <input> element.

You could wrap the <input> inside of a ng-container element, and bind the ngForOf to the last. Like this:

<form>
   <ng-container *ngFor="let object of objects">
      <input type="checkbox"> {{object.name}}
   <ng-container>
</form>

With this approach, the generated HTML is the same, as the ng-container element is stripped away.

score 0 · Accepted Answer · edited Mar 19 '21 at 17:10

0

You need to put *ngFor on a container to make the range variable be visible inside it. Here I have used div, but you can use anything you want.

<form>
   <div *ngFor="let object of objects">
      <input type="checkbox"> {{object.name}}
   <div>
</form>

edited Mar 19 '21 at 17:10

Roy

7,811
4
24
47

answered Jul 02 '18 at 07:14

Suren Srapyan

66,568
14
114
112

It works, but it does create some boilerplate. I guess this is the only way to go. Do you think my example didn't work because Angular didn't have the access to the object.name variable? – sander Jul 02 '18 at 07:19
Yes, outside `input` it is not visible. – Suren Srapyan Jul 02 '18 at 07:20

score 0 · Answer 4 · answered Jan 30 '20 at 13:45

I had to ensure the for attribute in the label was the same as the input id:

See snippet here

 <div class="m-checkbox-list">
   <label *ngFor="let detectionSource of detectionSources" for="detectionSource_{{detectionSource.id}}" class="m-checkbox">
    <input id="detectionSource_{{detectionSource.id}}" type="checkbox" name="detectionSource_{{detectionSource.name}}" [(ngModel)]="detectionSource.isSelected">
                                    {{detectionSource.name}}
    <span></span>
   </label>
 </div>

Creating a list of checkboxes with ngFor Angular

4 Answers4