Angular Templates - inline expressions vs calling to function

Question

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;
}

Answer 1

Most answers here only mention the difference in performance as marginal. I don't think this is correct and the performance here can be quiet significant. Please refer to Phil Parsons great article about this: Function calls in Angular expressions are killing your apps performance

You should be aware of the performance hit as shown there

Answer 2

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:

• The mechanics of DOM updates in Angular.