Angular binding to function results

I've been going through the guide on angular.io and came across the section on the NgClass directive. In the example provided the ngClass' source is a component function:

// HTML
<div [ngClass]="setClasses()">This div is saveable and special</div>

// Controller
setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  };
  return classes;
}

Does this not create a large overhead during the digest cycle considering the directive does not know when the result of the function has changed and would trigger a new evaluation of the function during each digest cycle? In contrast I'd expect the following code to provide the same functionality but to only re-evaluate specifically when one of the observed values have changed (canSave, isUnchanged, isSpecial).

<div [ngClass]="{ saveable : canSave, modified : !isUnchanged, special: isSpecial }">This div is saveable and special</div>

Could someone shed some light on what I should take into account to optimize performance? An example use case would be to have this ngClass on an ngRepeat that creates ~200 elements on the visible page.

As a side node and smaller question I was wondering if there is any good resource to learn about one-time binding (in angular2 vs angular1). The guide does not appear to cover this and I was hoping to have an async one time bind available in angular2.

Solution

Does this not create a large overhead during the digest cycle considering the directive does not know when the result of the function has changed and would trigger a new evaluation of the function during each digest cycle? In contrast I'd expect the following code to provide the same functionality but to only re-evaluate specifically when one of the observed values have changed (canSave, isUnchanged, isSpecial).

Your conclusion is correct.

The setClasses method returns a different instance for each call, which makes comparison in ngClass more expensive. If the same instance is returned as long as no dependency changed, then binding to a method this way is fine.

This was addressed recently very. https://github.com/angular/angular.io/issues/3072

As a side node and smaller question I was wondering if there is any good resource to learn about one-time binding (in angular2 vs angular1). The guide does not appear to cover this and I was hoping to have an async one time bind available in angular2.

Angular2 doesn't support one-time binding.