Difference between double and single curly brace in angular JS?

Angularjs

Angularjs Problem Overview


I am new to this angular world, i am bit confused with the use of double curly braces {{}} and single curly braces{} or sometime no curly brace is used to include the expression like in the directives

  1. ng-class={expression}
  2. normal data binding like{{obj.key}}
  3. ng-hide='mydata==="red"'

Angularjs Solutions


Solution 1 - Angularjs

{{}} - double curly braces:

{{}} are Angular expressions and come quite handy when you wish to write stuff to HTML:

<div>
    {{planet.name == "Earth" ? "Yeah! We 're home!" : "Eh! Where 're we?"}}
</div>

<!-- with some directives like `ngSrc` -->
<img ng-src="http://www.example.com/gallery/{{hash}}"/>

<!-- set the title attribute -->
<div ng-attr-title="{{celebrity.name}}">...

<!-- set a custom attribute for your custom directive -->
<div custom-directive custom-attr="{{pizza.size}}"></div>

Don't use these at a place that is already an expression!

For instance, the directive ngClick treats anything written in between the quotes as an expression:

<!-- so dont do this! -->
<!-- <button ng-click="activate({{item}})">... -->  

{} - single curly braces:

{} as we know stand for objects in JavaScript. Here, too, nothing different:

<div ng-init="distanceWalked = {mon:2, tue:2.5, wed:0.8, thu:3, fri:1.5, 
sat:2, sun:3}">

With some directives like ngClass or ngStyle that accept map:

<span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span>

<div ng-class="{'green' : vegetable == 'lettuce', 
'red' : vegetable == 'tomato'}">..

no curly braces:

As already mentioned just go braceless when inside expressions. Quite simple:

<div ng-if="zoo.enclosure.inmatesCount == 0">
    Alarm! All the monkeys have escaped!
</div>

 

Solution 2 - Angularjs

I know this is an old post and might be a bit off topic, but this is in response to @DonD and @GafrieldKlon...

It would seem a watcher is actually placed if you were to use the ng-bind directive, not when using {{}}. That being said, I believe @riyas answer above is still partially true in that avoiding {{}} is generally better for performance, but not for the reason stated.

This answer to another post explains this in more detail.

Solution 3 - Angularjs

one more thing about {{}} it is also used as Watcher.. please avoid as much as possible for better performance

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMohamed HussainView Question on Stackoverflow
Solution 1 - AngularjsAlwaysALearnerView Answer on Stackoverflow
Solution 2 - AngularjsPleeboView Answer on Stackoverflow
Solution 3 - Angularjsriyas vaView Answer on Stackoverflow