Angular 2: Binding to Functions from Component Templates
<p>In Angular 1 we avoided calling functions from within template expressions in excess, e.g. <code>ng-repeat="item in vm.getFilteredItems()"</code> because property changes unrelated to the result of <code>getFilteredItems</code> would cause the function to recompute repeatedly and unnecessarily on digests, which commonly causes performance problems at scale. Instead we bound to objects, and compute based on events (e.g. <code>ng-repeat="item in vm.filteredItems</code>).</p>

<p>In Angular 2, the dirty checking process has been optimized but functions called in component templates will still be called when any properties at the component level change, regardless of whether the function is dependent on those properties. I expect this could lead to the same performance issues if used improperly.</p>

<p>Here is a simplified example of the differing approaches in Angular 2:</p>

<pre><code>// function binding in template
@Component({
  selector: 'func',
  template: `
    &lt;input [(ngModel)]="searchTerm" placeholder="searchTerm" /&gt;
    &lt;div *ngFor="let name of filteredNames(searchTerm)"&gt;{{name}}&lt;/div&gt;
  `
})
export class FuncComponent {
  @Input() names:string[];

  filteredNames(searchTerm) {

    if (!searchTerm) return this.names;

    let filteredNames = [];

    return this.names.filter((name) =&gt; {
      return name.toLowerCase().indexOf(searchTerm.toLowerCase()) &gt; -1;
    });
  }
}
</code></pre>

<p>-</p>

<pre><code>// no function binding
@Component({
  selector: 'nofunc',
  template: `
    &lt;input [(ngModel)]="searchTerm" (ngModelChange)="search($event)" placeholder="searchTerm" /&gt;
    &lt;div *ngFor="let name of filteredNames"&gt;{{name}}&lt;/div&gt;
  `
})
export class NoFuncComponent implements OnInit {
  @Input() names:string[];

  searchTerm: string;

  ngOnInit() {
    this.search(this.searchTerm);
  }

  search() {
    if (!this.searchTerm) {
      this.filteredNames = this.names;
      return;
    }

    this.filteredNames = this.names.filter((name) =&gt; {
      return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) &gt; -1;
    });
  }
}
</code></pre>

<p><a href="http://plnkr.co/edit/AAFknlJgso3D8F1w3QC1?p=preview">http://plnkr.co/edit/AAFknlJgso3D8F1w3QC1?p=preview</a></p>

<p>Is this still a concern in Angular 2? Which approach is preferred, and why? Thanks!</p>