Angular binding to function results

Question

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.

Günter Zöchbauer · Accepted Answer · 2017-01-09 14:30:15Z

2

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.

answered Jan 9, 2017 at 14:30

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raven Over a year ago

Ah. Thank you for the clarification! I ran into this last week but didn't realize it was already adjusted. Previous experience with angular taught me to always take performance into consideration and this would have been a major pitfall.

Günter Zöchbauer Over a year ago

Exactly, this is why they changed it.

Heretic Monkey Over a year ago

Late addition to the answer, but Angular does not have a digest cycle per se. It uses zones for isolated change detection.

Günter Zöchbauer Over a year ago

You are right. It should be "change detection" but it's a quote and I assume "digest cycle was just used to make it easier for devs coming from Angular1 to understand what is meant.

Collectives™ on Stack Overflow

Angular binding to function results

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related