Difference between Double and Single Curly Brace in AngularJS ?

Last Updated : 08 Nov, 2023

In the AngualrJS framework, we can build attractive and dynamic web applications through different utilities. In AngularJS, there are double curly braces “{{ }}” and also single curly braces “{ }”. The Double Curly Braces in AngularJS are mostly used for Data Binding, which also means that we are allowed to insert dynamic content into our HTML templates.

The Single Curly Braces are used for the directives in AngularJS, which are mainly the instructions to the framework to perform the specific actions in the HTML document. So in this article, we will deeply understand the concepts of this double and single curly brace with their implementation and core differences.

Double Curly Brace “{{ }}”

Double Curly Brace “{{ }}” in AngularJS is the medium to be used for the data binding. Data Binding mainly allows us to connect our data model or the JavaScript objects with the view or HTML templates so that any changes in the model are automatically reflected in the view and vice versa. We can use the double curly braces to display or show the values that are from the data model.

Syntax

<div ng-controller="MyController">
    <p>{{ property }}</p>
</div>

Example: The below example demonstrates the usage of the Double Curly Braces in AngularJS. Here, in this example to bind the {{ name }} expression within the paragraph tag, which dynamically displays the user’s inputted name in real-time as they type it into the input field.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          AngularJS Double Curly Braces Example 
      </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
      </script> 
    <style> 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body ng-app="myApp" 
      ng-controller="myCtrl"> 
    <div> 
        <h1>GeeksforGeeks</h1> 
        <h3>Double Curly Braces Example</h3> 
  
        <label for="nameInput"> 
              Enter Your Name: 
          </label> 
        <input type="text"
               id="nameInput" 
               ng-model="name" 
               placeholder="Your Name"> 
  
        <p ng-show="name"> 
              Hello, {{ name }}! 
          </p> 
        <p ng-hide="name"> 
              Please enter your name above. 
          </p> 
    </div> 
  
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('myCtrl', function ($scope) { 
            $scope.name = ''; 
        }); 
    </script> 
</body> 
  
</html>

Output:

Ex1

Single Curly Brace “{ }”

In AngularJS, the Single Curly Braces “{ }“ are mainly used for the Directives. The directives are the markers on the Document Object Model element (attribute, element name, comment, or CSS class) that inform the AngularJS to join the particular behavior of the functionality of that DOM element. These directives are important parts of creating dynamic and interactive web applications.

Syntax

<div ng-class="{ 'class-name1' : expression1,
           'class-name2' : expression2, ...}">
</div>

Example: The below example demonstrates the usage of the Single Curly Brace in AngularJS. Here, in this example single curly braces {} are used within the ng-class directive to conditionally apply CSS classes to the <div> element based on the state of the checkbox, demonstrating how directives and expressions are enclosed within single curly braces to control element behavior in AngularJS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>AngularJS ng-class Example</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
      </script> 
    <style> 
        .class1 { 
            color: red; 
        } 
  
        .class2 { 
            background-color: yellow; 
        } 
  
        .geeks-heading { 
            color: green; 
        } 
    </style> 
</head> 
  
<body ng-app="myApp" 
      ng-controller="myCtrl"> 
    <div> 
        <h1 class="geeks-heading"> 
              GeeksforGeeks 
          </h1> 
        <h3>Single Curly Brace Example</h3> 
  
        <label for="changeClass"> 
              Change Class: 
          </label> 
        <input type="checkbox"
               id="changeClass" 
               ng-model="applyClass"> 
  
        <div ng-class="{'class1': applyClass,  
                           'class2': !applyClass}"> 
            This div's class is dynamically 
            changed based on the checkbox. 
        </div> 
    </div> 
    
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('myCtrl', function ($scope) { 
            $scope.applyClass = false; 
        }); 
    </script> 
</body> 
  
</html>

Output:

Ex2