title: Angular - How can I check a checkbox based on values in Array?
body: <p>I have a form whith these checkboxes, in order to allow users to select multiple 'calibres' of an item: </p>
  
  <p><a href="https://i.stack.imgur.com/GiuBh.png" rel="nofollow noreferrer">Form checkbox</a></p>
  
  <p>Those checkboxs are created through ngFor from an array called 'calibres' which have all the possible values, as shown in following code:</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;div &gt;
        &lt;mat-checkbox #checkBox
        *ngFor="let calibre of calibres; let i = index"
        [value]="calibre"
        (change)="getCheckbox()"
        class="example-margin mb-0 mt-1" &gt;{{calibre}}&lt;/mat-checkbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>getCheckbox()</em> function on <em>component.ts</em> creates an array of those elements checked in my checkbox</p>
  
  <pre><code>  getCheckbox() {
  
      this.item.calibres = [];
      const checked = this.checkBox.filter(checkbox =&gt; checkbox.checked);
      checked.forEach(data =&gt; {
           this.item.calibres.push ( data.value );
      });
    }
  </code></pre>
  
  <p>When I submit the form, this array of checked elemets is stored in Backend for this particular 'item' created by the form, so the stored array will be something like [ 50,60 ]. ONLY checked checkboxes.</p>
  
  <p>What Im trying to do is at the moment of filling the form ( for item 'edit' purposes ) is get checked  those checkboxes stored in the array.</p>
  
  <p>How can I achieve that ?</p>