Difference between ng-bind and interpolation {{}} in Angular

Question

Is there any difference between {{ }} and ng-bind in angular.

I am quite new to Angular. I started with using {{ }} and then in the documentation i find ng-bind. I think they do the same work but then why an extra directive, if not then please tell the difference.

Voted to reopen as it is a clear question, however this question can get an answer from [why ng-bind is better than `{{}}` in angular?](http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular) — Grijesh Chauhan, Mar 01 '15 at 13:43
I think Grijesh is right -- this looks like the same question (and this question a dupe): [AngularJS : Why ng-bind is better than {{}} in angular?](https://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular) — ruffin, Jul 06 '21 at 18:24

score 34 · Accepted Answer · answered Sep 09 '14 at 09:53

There is some hint in the official docs: https://docs.angularjs.org/api/ng/directive/ngBind

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

score 10 · Answer 2 · edited May 23 '17 at 12:32

The most obvious difference between them is Flash of Unstyled content while using {{ ... }}.

However, there is a more subtle difference between the two if the object you pass to {{ obj }} and ng-bind="obj" is not a string.

From https://stackoverflow.com/a/19744728/987185 :

Depending on whether you use {{ ... }} or ng-bind syntax, the .toJSON and the .toString function on your object will be called to determine its representation.

score 9 · Answer 3 · edited May 23 '17 at 12:25

9

In addition to the above mentioned answers,

Performance Issues with Interpolation:

As explained in this thread better,

ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply when the passed value does actually change.

The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.

edited May 23 '17 at 12:25

Community

1
1

answered Dec 22 '16 at 17:14

hemanth savvana

91
1
3

score 8 · Answer 4 · answered Sep 09 '14 at 09:53

8

{{ }} can flash when the page is loading, ng-bind hides the expression properly until it is displayed correctly.

answered Sep 09 '14 at 09:53

Lajos Veres

13,595
7
43
56

score 3 · Answer 5 · answered Mar 24 '15 at 16:59

In AngularJs ng-bind directive works as alternative to the interpolation directive {{ }}. By inserting an ng-bind attribute to HTML element we can insert AngularJS data into it.

Here is an example:

 <div ng-controller="DemoController" >
  <span ng-bind="demoData.doThis()"></span>
</div>

The Key Difference is ng-bind attribute wont show Html content on page loading, where as interpolation Directive show as flash of content without style while page loading.

score 3 · Answer 6 · answered Nov 18 '17 at 15:24

Another difference is the way ng-bind and interpolation display the data. ng-bind calls the toString() method, whereas interpolation uses a custom "stringify" function.

Example

<div ng-controller="showClockCtrl">
    <p>The current time is {{currentDateTime}}.</p>
    <p>The current time is <span ng-bind="currentDateTime"></span>.</p>
</div>

<div ng-controller="showClockCtrl">
    <p>MyObject is {{myObject}}</p>
    <p>MyObject is <span ng-bind="myObject"></span></p>
</div>

<script>
var showClockCtrl = function ($scope) {
    $scope.currentDateTime = new Date();
    $scope.myObject = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3'
    }
};
</script>

Output

The current time is "2017-11-18T15:09:59.429Z".

The current time is Sat Nov 18 2017 10:09:59 GMT-0500 (EST).

MyObject is {"key1":"value1","key2":"value2","key3":"value3"}

MyObject is [object Object]

score 2 · Answer 7 · answered Jun 23 '17 at 11:18

Sometimes when we load our application in the browser , we can notice flashing content for some milliseconds before {{ name }} is resolved and data is loaded.

This happens because the template is loaded before AngularJS had a chance to go in and compile the elements. To resolve this issue, you can use ng-cloak directive.

In the first approach(i.e. {{}}), AngularJS evaluates the expression then replaces it with some value which sometime be left with the flashing double curly brackets but ng-bind saves this time by informing AngularJS to put the contents of the expression within the element itself.

Note: {{}} sometimes cause performance issue if we have thousand of bindings in our page.In these scenario's, we should go with ng-bind.

score 0 · Answer 8 · answered Sep 15 '18 at 09:29

Interpolation is only used for a Read-only purpose and you cannot assign a value to inside the mustache bracket to a variable that has been declared inside the Typescript file.

The basic difference between them is that ng-bind should always be used inside the element <> but Interpolation directive can be used inside, outside and between the elements.

score -2 · Answer 9 · answered Sep 26 '18 at 22:27

Not an answer, but ng-bind is easily exchangable by ng-bind-html, which puts actual html text inside the element instead of pure text.

Since I was wondering for (ok, just) minutes, I add it here as well. My problem was, text-DOM explorer shows the same output.

Difference between ng-bind and interpolation {{}} in Angular

9 Answers9

Example

Output

Linked

Related