title: Alternative to functions inside Angular Template
body: <p>I have a very common instance of an issue all over my app.  I'll give a simple example.</p>
  
  <p>component code:</p>
  
  <pre><code>const items = [1, 2, 3, 4, 5];
  let selectedItems = [2, 4];
  
  public isSelected(item: number): boolean {
      return this.items.find(x =&gt; x === item) != null;
  }
  </code></pre>
  
  <p>template:</p>
  
  <pre><code>&lt;div *ngFor="let item of items"&gt;
      &lt;span class="check-mark" *ngIf="isSelected(item)"&gt;&lt;/span&gt;
      {{ item }}
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm well aware that this is bad practice:</p>
  
  <pre><code>*ngIf="isSelected(item)"
  </code></pre>
  
  <p>I am also aware that two solutions to this issue is
  1.  Use pipes
  2.  Store values in local variables</p>
  
  <p>I do not have the option of doing either because my "items" and "selectedItems" are populated via data calls and I have varying object types as well.  They are not static arrays.</p>
  
  <p>It would be nice if Angular had an "ngIfChange" directive that only executed if a specified object changes.  Something along the lines of this:</p>
  
  <pre><code>*ngIf="isSelected(item); change selectedItems"
  </code></pre>
  
  <p>Does anyone know of a clean, simple way of handling arrays/lists/objects like this without the "functions in templates" issue?</p>
  
  <p>Thanks</p>