title: Angular 5 showing checkboxes as checked based on array
body: <p>I have a set of dynamic checkboxes in an Angular form:</p>
  
  <pre><code>&lt;div class="form-check" *ngFor="let topic of topics"&gt;
      &lt;input class="form-check-input" (change)="onChange(f)" #f type="checkbox" [value]="topic.name" name="topicgroup"&gt;
      &lt;label class="form-check-label" style="font-weight: normal"&gt;
          {{topic.name}}
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my edit component, how do I set them as checked?</p>
  
  <p>I have an array that holds all the options, and one which of the options are checked:</p>
  
  <pre><code>Topics: string[] = ['Topic1', 'Topic2', 'Topic3', 'Topic4', 'Topic5']; 
  selectedTopics: string[] = ['Topic1', 'Topic2']; 
  </code></pre>
  
  <p>How do I reflect that on my html page?</p>
  
  <p>Update: This is my onChange function:</p>
  
  <pre><code>onChange(f) {
  if (this.selectedTopics.indexOf(f.value) == -1) {
    this.selectedTopics.push(f.value);
  } else {
    this.selectedTopics.splice(this.selectedTopics.indexOf(f.value), 1);
  }
  </code></pre>