What are expressions in AngularJS ?
Last Updated :
30 Jul, 2024
In this article, we will see the expressions in Angular JS, along with knowing the different methods for implementing it through the code examples.
Expressions in AngularJS, are the statements that are to be evaluated, that is placed inside the double curly braces. The result of the evaluation will be returned exactly where the expression is defined. It helps in performing the data-binding. Data binding refers to the synchronization between the model and the view components. Expressions help in data-binding as they bind the application data to HTML. An important point to note here is that AngularJS expressions cannot contain regular expressions, loops, conditional statements, and functions. Expressions in AngularJS can contain literals, operators, and variables. AngularJS expressions can be used with primitive types like strings and numbers and other types like JavaScript objects and arrays.
There are 2 methods of writing expressions in AngularJS:
- Using the double braces
- Using the ng-bind directive
We will explore both these methods & know their implementation.
Using the double braces: The double curly braces can be used to displays the content from the model to the view component. Whatever is written inside double curly braces, will be displayed exactly at the place the expression is placed.
Syntax:
{{expression}}Example 1: This example describes the Expressions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<p>{{100}}</p>
<p>{{100*2}}</p>
</body>
</html>
Output:
Example 2: This example describes the Expressions using double braces.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
</form>
<p>Hello {{name}}</p>
</body>
</html>
Explanation: In this example, we have taken the name as an input. Then we have printed the message which contains the name that the user entered using the expression written in double braces.
Output:
Using the ng-bind directive: The ng-bind directive can be useful to bind the innerHTML of an element to a model property. If the value of a variable or expression changes, the content of the specified HTML element will change as well.
Syntax:
<element ng-bind="expression"> Contents </element>
Example 3: This example describes the Expressions using ng-bind directive.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
</form>
<p>Hello
<span ng-bind="name"></span>
</p>
</body>
</html>
Explanation: In this example, we have taken the name as an input. Using the ng-model directive, we can bind the value of the input to the application data. Then we have printed the name that the user entered using the ng-bind directive.
Output:
Performing operations inside expressions:
We can also perform expressions inside an expression.
Example 4: This example describes the concatenating of 2 strings.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="">
<form>
<label>Enter your first name:</label>
<input type="text" ng-model="firstname">
<br><br>
<label>Enter your last name:</label>
<input type="text" ng-model="lastname">
</form>
<p>Hello {{firstname+" "+lastname}}</p>
</body>
</html>
Output:
Example 5: In this example, we are calculating the total amount to be paid according to the quantity of the products entered by the customer.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body ng-app="myApp"
ng-controller="myctrl">
<form>
<label>
Enter the quantity of
items to be bought:
</label>
<br>
<br>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Pencil</td>
<td>10</td>
<td>
<input type="number"
ng-model="pencil"
min=0 value="0">
</td>
</tr>
<tr>
<td>Pen</td>
<td>20</td>
<td>
<input type="number"
ng-model="pen"
min=0 value="0">
</td>
</tr>
<tr>
<td>Sharpner</td>
<td>15</td>
<td>
<input type="number"
ng-model="sharpner"
min=0 value="0">
</td>
</tr>
<tr>
<td>Eraser</td>
<td>5</td>
<td>
<input type="number"
ng-model="eraser"
min=0 value="0">
</td>
</tr>
</table>
<p>Total amount to be paid:
{{pencil*10+pen*20+sharpner*15+eraser*5}}
</p>
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.pencil = 0;
$scope.pen = 0;
$scope.sharpner = 0;
$scope.eraser = 0;
});
</script>
</body>
</html>
Explanation: In this example, a table is displayed which shows details like the product name and price. The user needs to enter the quantity that he wants to buy and the amount to be paid is displayed.
Output:
Note: The operations performed for calculation of the total amount to be paid is inside the expression:
{{ pencil*10 + pen*20 + sharpner*15 + eraser*5 }}Example 6: This example describes the Expression in Angular JS by specifying the number, string, array, object.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
<p>Name of the student: {{student.name}}</p>
<p>Age of the student: {{student.age}}</p>
<p>Favourite subject: {{subjects[0]}}</p>
<p>Least favourite: {{subjects[1]}}</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.student = {
"name": "GeeksforGeeks",
age: 20
};
$scope.subjects =
["English", "Hindi",
"Maths", "SST", "Science"];
});
</script>
</body>
</html>
Output:
There is one similarity between the AngularJS and JavaScript expressions i.e, both can contain literals, operators and variables.
Comparison between AngularJS & Javascript expressions:
AngularJS Expressions | JavaScript Expressions |
|---|
These can be written inside HTML.
| These cannot be written inside HTML.
|
These expressions support filters.
| These expressions do not support filters.
|
Conditionals, loops, and exceptions are not supported by them.
| Conditionals, loops, and exceptions are supported by them.
|
Similar Reads
What is Angular Expression ?
Angular is a great, reusable UI (User Interface) library for developers that help in building attractive, and steady web pages and web application. In this article, we will learn about Angular expression. Table of Content Angular ExpressionDifferent Use Cases of Angular ExpressionsSyntaxApproach Ang
4 min read
What are Directives in AngularJS ?
AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM mat
7 min read
AngularJS Expressions
In this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples. Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is writ
2 min read
AngularJS ng-class if-else Expression
In the AngularJS framework, Conditional statements, like if-else expressions, are a feature that helps many web developers like us to apply different conditions in AngularJS applications. This can be used with the ng-class directive that allows us to control the styling of the elements based on the
5 min read
What are templates in AngularJS ?
Templates in AngularJS are simply HTML files filled or enriched with AngularJS stuff like attributes and directives. A directive is a marker element that is used to target a particular attribute or class to render its behavior according to the needs. Model and controller in Angular are combined with
3 min read
What are angular Material Icons ?
Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our applicat
3 min read
What is currency filter in AngularJS ?
In this article, we will know the currency filters in AngularJS, along with understanding its implementation through the examples. Filters are used to modify or format the given data in a certain way. AngularJS has different filters such as uppercase, lowercase, etc. One of those filters is the curr
2 min read
What is Interpolation in AngularJS ?
In this article, we will know about Interpolation in AngularJS, along with understanding the basic implementation. In AngularJS, Interpolation is a way to transfer the data from a TypeScript code to an HTML template (view), i.e. it is a method by which we can put an expression in between some text a
2 min read
What is View in AngularJS ?
In AngularJS, the View is what the user can see on the webpage. In an application (as per the user’s choice), the chosen view is displayed. For this purpose, the ng-view directive is used, which allows the application to render the view. Any changes made in the view section of the application are re
7 min read
AngularJS ng-keypress Directive
The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by <inp
2 min read