I've been going through the guide on angular.io and came across the section
on the NgClass directive
<https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass>.
In the example provided the ngClass' source is a component function:
<div [ngClass]="setClasses()">This div is saveable and special</div>
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.
Best regards
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
