Angular Templates - Inline Expressions Against Function Calls

Question

Is there a difference between the two:

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

against

 <li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

and in the component class:

 shouldDisableField(): boolean{ return this.condition1 && this.condition2 && this.condition3; } 

Answer 1

The only difference between calling a function and evaluating an expression in JavaScript , Angular doesn't matter here. A function call is usually minimally slower, so the first option should be a little faster.

Angular view compiler updateRenderer following code for the 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 all that matters.

You can learn more about the updateRenderer function in the article:

• The mechanics of DOM updates in Angular .

Answer 2

Not really, although I would suggest the second one, since it is much cleaner and will help with minimizing data transfer in templates. Admittedly, this may seem insignificant, but its good practice is to split the javascript code, plus it will benefit from code minimization and gzip (if enabled by HTTP requests).

However, saying that if this is an exception, then the first may be more useful for other developers (or themselves) on the track, but I would use it only in a rare case, since the second gives you the opportunity to update / expand / fix it much easier, especially if you are likely to reuse the same rule / condition.

As for the Angular binding model, I'm not sure that there are many ways to cache (if that's what you were thinking about) or the performance that I personally saw.

Hope this helps.

Answer 3

As explained in the answers above, both approaches will work fine.

 <li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> <li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

But there are some points that make them different.

One of the most important things is the AOT strategy. Functional challenges can be a headache when porting from JIT to AOT (which usually happens with most developers). If the called function is a private function, AOT Compilation throws a compile-time error because it treats the template and component as 2 different objects.

Another point is that data bindings are readable and can be easily understood.

Having said that, we may encounter a situation where data bindings alone do not solve the problem. Calling a function in these cases will not be a mistake!

Hope this helps you! :)

Answer 4

There really is no difference. I would use

 <li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

if there was only one expression in my template. Otherwise, I would use

 <li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

to reduce the recorded code.