title: Checkbox state based on function Angular
body: <p>In my component, I have two arrays of items: <code>allItems</code> and <code>selectedItems</code> (using dummy names here, of course). The selection is handled by checkbox controls and their state depends on whether an item is found in <code>selectedItems</code>.</p>
  
  <p>Since I need to evaluate checkbox state based on an expression, I need to call a function, like so:</p>
  
  <pre><code>&lt;div *ngFor="let item of allItems; let i = index"&gt;
      &lt;input type="checkbox"
                  [checked]="itemChecked(item .Id)"
                  (change)="toggleItem(i)"&gt;
      &lt;label class="form-check-label" [for]="item.Id"&gt;{{ item.Value }}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the function goes something like:</p>
  
  <pre><code>itemChecked(id: number) {
      return this.selectedItems.findIndex(x =&gt; x.Id == id) &gt; -1;
  }
  </code></pre>
  
  <p>The problem is the <code>itemChecked</code> executes nonstop. I've read before this can maybe be solved using directives, but if that is even the case, I can't find any concrete example.</p>
  
  <p>Any help would be appreciated.</p>