Angular 2 Performance: Is it better to bind with a data member than a function?

Question

I wanted to have some idea about whether binding to data member is better in performance vs binding to a function?

e.g. which of the below statement will have better

Answer 1

If you use the approach *ngIf="isThisTrue" the compiler will generate the following updateRenderer function:

function (_ck, _v) {
    var _co = _v.component;
    var currVal_1 = _co.isThisTrue;   <--- simple member access
    _ck(_v, 5, 0, currVal_1);
}

If you use the second approach *ngIf="seeIfItHasBecomeTrue()", the function will look like this:

function(_ck,_v) {
    var _co = _v.component;
    var currVal_1 = _co.seeIfItHasBecomeTrue();   <--- function call
    _ck(_v,5,0,currVal_1);
}

And the function call is more performance heavy than simple member access.

To learn more about updateRenderer function read:

• The mechanics of DOM updates in Angular