title: Showing a checkbox button as selected when value in form is set to true
body: <p>I have a form that has a set of checkboxes which are styled as buttons and thus don't stay checked when they are clicked.</p>
  
  <p>I use the Angular template driven approach to forms and use a <code>*ngFor</code> loop to set a number of weekdays which can be checked (multiple checkboxes can be checked at the same time if that's unclear).</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;div class="btn-group btn-group-justified" data-toggle="buttons" role="group"&gt;
    &lt;label class="btn btn-primary" *ngFor="let wday of wdays" [class.active]="f.value.wday"&gt;
      &lt;input type="checkbox" [name]="wday" [id]="wday" ngModel [value]="wday"&gt;{{ wday }}
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The form is initiated like this: <code>&lt;form (ngSubmit)="onSubmit(f)" #f="ngForm"&gt;</code> and thus <code>f.wday</code> returns <code>true</code> (if clicked), <code>false</code> if (it was unchecked after being clicked at least once) or <code>""</code> (after it was initiated) in the console.</p>
  
  <p>I am a bit confused why the buttons are not visually shown as being active.</p>