How to generate checkboxes using *ngFor and a list of maps
<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>