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

Question

I have the following card

.dart

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

My incorrect html attempt 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 problems are as follows:

• The label for each flag should be a “symptom ['name'] - how do I integrate this into * ngFor?
• How can I tell if a certain checkbox is selected?

EDIT 1

Now I see the checkbox and 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 appears to be on one line, and the checkbox on the other. I am using bootstrap.min.css and wondering if this is the main reason. The flags are larger than expected, as shown below:

Cheers and thanks Teddy

Answer 1

ngFor . "#binding ", . . .

, , DOM. ngFor.

, ngModel checked - checked = "checked" , 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>
  `
})

Plnker