Angular to use ng-bind or {{}}?

Question

Ok so I have read in several places that using ng-bind is better for performance. But looking at these jsperfs makes me a bit confused :)

https://jsperf.com/angular-bind-vs-brackets

http://jsperf.com/ng-bind-vs-brackets/14

So what is the best way when it comes to performance?

{{::value}}

or

<div ng-bind="value"></div>

ng-bind is use for one-way-binding and {{}} is Two way binding. For one-way-bind - angular is not watching that variable to be change or not. But for two-way-binding - angular watching that variable to be change or not, and if value is change then angular reflect newValue to Html or JS. — gaurav bhavsar
– gaurav bhavsar, Commented Sep 9, 2015 at 8:32
So if we where to compare them more equally then {{::value}} is the best option when it comes to performance? — Mackelito
– Mackelito, Commented Sep 9, 2015 at 8:34
Maybe, but it doesn't look pretty displaying {{le value}} to the user for a split second when the template loads. So you should only ever use {{}} where it won't be visible to the user. — Chrillewoodz
– Chrillewoodz, Commented Sep 9, 2015 at 8:36
Please note: "The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes." (ref) .Both ng-bind and {{...}} are one way updatable (watched) bindings, i.e. model -> view. Also note that the second jsperf compares ng-bind with ng-model - 2 different things. @Mackelito: I would suggest to test yourself in your specific case. It should be very simple. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Sep 9, 2015 at 8:41
@Chrillewoodz we are using ng-cloak so that is not a problem for us. — Mackelito
– Mackelito, Commented Sep 9, 2015 at 8:44

Community · Accepted Answer · 2017-05-23 12:00:12Z

4

You should use ng-bind. Its a directive that puts a watcher on that variable so it only updates when the variable changes, while {{}} will dirty-check and refreshes the variable in every digest cycle.

See this answer

Also :: is called "bindonce" and will only set the variable once and wont update afterwards.

e: The jsperf tests binding from variable to html (I think), while the linked answer focuses on the behaviour afterwards. If you got 100 curly braces and you update one model, every {{}} gets updated. While ng-bind only updates if the variable itself changes, because it creates a watcher for that variable.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Sep 9, 2015 at 9:50

CMR

9331 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mackelito Over a year ago

The answer you link to is more than 1 year old.. is it really still valid? Care to comment on the jsperf tests?.. how come does that show that {{}} is quicker?

EscapeNetscape · Accepted Answer · 2016-10-24 15:56:55Z

1

When it comes to one-time-binding, then you should also use the colon in ng-bind as well.

So use ng-bind="::value"

for filter or expressions you have to use brackets: ng-bind="::(value | number:2)"

answered Oct 24, 2016 at 15:56

EscapeNetscape

2,9491 gold badge39 silver badges32 bronze badges

Comments

momo · Accepted Answer · 2015-09-09 08:51:25Z

-1

use ng-bind is better . If javascript files is not loaded , {{ }} will show on the page .

answered Sep 9, 2015 at 8:51

momo

1851 silver badge6 bronze badges

2 Comments

gaurav bhavsar Over a year ago

You can hide {{}} using ng-cloak

momo Over a year ago

sorry, i did not look carefully question , {{ ::value }} should compare with ng-bind="::value" ， both of them are bind-once . but ng

Collectives™ on Stack Overflow

Angular to use ng-bind or {{}}?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related