title: How to generate checkboxes using *ngFor and a list of maps
body: <p>I have the following map</p>
  <h2>.dart</h2>
  <pre><code>List&lt;Map&lt;String, dynamic&gt;&gt; symptoms = [
    {'name': 'Dizziness', 'checked': false},
    {'name': 'Fainting', 'checked': false}
  ];
  </code></pre>
  <p>My <b>incorrect</b> attempt in html is shown below</p>
  <h2>.html</h2>
  <pre><code>&lt;div class = &quot;form-group&quot;&gt;
          &lt;div class = &quot;form-control&quot;
               ngControl = &quot;symptoms&quot;&gt;
            &lt;label for=&quot;symptom&quot; &gt;Symptoms&lt;/label&gt;
              &lt;input
                type = &quot;checkbox&quot;
                *ngFor = &quot;#symptom in symptoms&quot;
                [checked]=&quot;symptom['checked']&quot;/&gt;
  
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>My issues are as follows:</p>
  <blockquote>
  <ol>
  <li>The label for each checkbox should be &quot;symptom['name'] - how do I integrate this in the *ngFor?</li>
  <li>How can I determine that a specific checkbox was selected?</li>
  </ol>
  </blockquote>
  <h2>EDIT 1</h2>
  <p>I am now seeing the checkbox and the label using the following:</p>
  <pre><code>  &lt;div layout = &quot;row&quot;
         layout-align = &quot;center&quot;
         class = &quot;form-group&quot;
         *ngFor = &quot;#s of symptoms&quot;&gt;
      &lt;label&gt;{{s['name']}} &lt;/label&gt;
      &lt;input
          type = &quot;checkbox&quot;
          [checked] = &quot;s['checked']&quot;
          class = &quot;form-control&quot;/&gt;
    &lt;/div&gt;
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/WIZkZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WIZkZ.png" alt="enter image description here" /></a></p>
  <p>Cheers, and thanks
  Teddy</p>