Issue
Is there any difference between those two:
<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li>
vs
<li [ngClass]="{disabledField: shouldDisableField()}">Click</li>
and in component class:
shouldDisableField(): boolean{
return this.condition1 && this.condition2 && this.condition3;
}
Solution
The only difference is between a function call and evaluating an expression in JavaScript, Angular is irrelevant here. Function call is usually marginally slower, so the first option should be marginally faster.
Angular view compiler produces the following code for updateRenderer
function:
function(_ck, _v) {
var _co = _v.component;
---> var currVal_0 = _ck(_v, 3, 0, ((_co.condition1 && _co.condition2) && _co.condition3));
_ck(_v, 2, 0, currVal_0);
}
And
function(_ck, _v) {
var _co = _v.component;
--> var currVal_0 = _ck(_v, 3, 0, _co.shouldDisableField());
_ck(_v, 2, 0, currVal_0);
}
As you can see only one line is different and that is all that matters.
You can read more about updateRenderer
function in the article:
Answered By - Max Koretskyi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.