196

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"'
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
Mohamed Hussain
  • 7,433
  • 14
  • 55
  • 85

3 Answers3

287

{{}} - 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>

 

Community
  • 1
  • 1
AlwaysALearner
  • 43,759
  • 9
  • 96
  • 78
  • 2
    We can use {{}} with ng-include directive, in ng-src property. – Jay Shukla Jul 27 '13 at 15:22
  • 5
    Like someone mentioned in the comments, Double braces {{}} is supposed to be put in ng-src directive between quotes. But why is ng-src able to do that? Is there a name for special kind of directives that takes {{}} inside quotes? – ayjay Jun 13 '14 at 16:56
  • Is there any difference between {{foo-bar}} and "{{foo-bar}}" ? – aandis Jul 30 '14 at 14:35
  • 6
    I had to do a bit more research on this myself to fully understand it, but I thought this blog post really helped along with @CodeHater's answer, [Why does AngularJS sometimes use single braces { }, sometimes double braces {{ }}, and sometimes no braces?](http://www.whitneyland.com/2013/02/why-does-angularjs-sometimes-use-single-braces-sometimes-double-braces-and-sometimes-no-braces.html) – Prancer Feb 18 '15 at 20:58
2

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.

Pleebo
  • 163
  • 3
  • 13
1

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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
riyas va
  • 145
  • 1
  • 1
  • 5