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?

Answer 1

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>

Answer 2

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.