How to generate checkboxes using *ngFor and a list of maps

Question

I have the following map

.dart

List<Map<String, dynamic>> symptoms = [
  {'name': 'Dizziness', 'checked': false},
  {'name': 'Fainting', 'checked': false}
];

My incorrect attempt in html is shown below

.html

<div class = "form-group">
        <div class = "form-control"
             ngControl = "symptoms">
          <label for="symptom" >Symptoms</label>
            <input
              type = "checkbox"
              *ngFor = "#symptom in symptoms"
              [checked]="symptom['checked']"/>

        </div>
  </div>

My issues are as follows:

The label for each checkbox should be "symptom['name'] - how do I integrate this in the *ngFor?

How can I determine that a specific checkbox was selected?

EDIT 1

I am now seeing the checkbox and the label using the following:

  <div layout = "row"
       layout-align = "center"
       class = "form-group"
       *ngFor = "#s of symptoms">
    <label>{{s['name']}} </label>
    <input
        type = "checkbox"
        [checked] = "s['checked']"
        class = "form-control"/>
  </div>

However, the label seems to be on one row and the checkbox on another. I am using bootstrap.min.css and wonder if this is the main cause. The checkboxes are larger than expected too as shown below:

Cheers, and thanks Teddy

score 2 · Accepted Answer · edited May 23 '17 at 12:25

2

Your ngFor syntax is incorrect. The expression should be "#binding of list", not in. See Mark's answer for a more elaborate explanation.

Also if you want to repeat the label and the checkbox, you need to move the template higher up the DOM tree. For this, use the expanded ngFor syntax.

Finally, use ngModel instead of binding to checked - the existence of the attribute must be checked="checked" which does not make it ideal for binding to a Boolean.

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `{{title}} <br />
  <form>
  <div class = "form-group">
        <template ngFor #symptom [ngForOf]="symptoms">
        <div class = "form-control">
          <label for="symptom" >{{symptom.name}}</label>
            <input
              type = "checkbox"
              ngControl="symptom"
              [(ngModel)]="symptom['checked']" />
        </div>
        </template>
  </div>
  </form>
  `
})

Demo Plnker

edited May 23 '17 at 12:25

Community

1
1

answered Jan 02 '16 at 04:38

Michael Kang

52,003
16
103
135

Thank you very much. The 'in' used is due to mixing expressions in Dart with Angular - my mistake. Your Plnker demo runs fine, but I am wondering about the lable name - {{symptom.name}} - should it not be {{symptom['name']}} instead? It is the only one that works with Dart. How do I determine which checkbox was checked? – st_clair_clarke Jan 02 '16 at 05:03
I'm not sure if Dart changes things, as I don't know Dart. But either should work: symptom.name or symptom['name'] - both are equivalent. To determine which checkbox was checked, you can add a click handler: (click)="onClick(symptom)". See the demo. – Michael Kang Jan 02 '16 at 05:05

How to generate checkboxes using *ngFor and a list of maps

.dart

.html

EDIT 1

1 Answers1