---
title: "How to use Operators in AngularJS with examples?"  
description: "How to use Operators in AngularJS with examples?"  
author: "Anubhav Sharma"  
published: 2024-05-13  
updated: 2024-05-14  
canonical: https://www.mindstick.com/forum/160652/how-to-use-operators-in-angularjs-with-examples  
category: "angular js"  
tags: ["web development", "javascript", "angular js", "javascript framework", "front-end development"]  
reading_time: 5 minutes  

---

# How to use Operators in AngularJS with examples?

**How to use [Operators](https://www.mindstick.com/articles/716/php-operators) in [AngularJS](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc) with examples?**

## Replies

### Reply by Manish Sharma

#### AngularJS Operators

In AngularJS, you can use operators within expressions to perform various operations, such as **arithmetic**, **comparison**, **logical**, and **string manipulation**.

Here are some common operators you can use:

1. Arithmetic Operators
2. Comparison /Relational Operators
3. Logical Operators
4. Assignment Operators
5. Conditional Operator

**Arithmetic Operators:** AngularJS supports standard arithmetic operators like **addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).**

## Example –

```html
    <div class="container" >
        {{ 5 + 3 }} <!-- Output: 8 -->
        {{ 10 - 4 }} <!-- Output: 6 -->
        {{ 2 * 3 }} <!-- Output: 6 -->
        {{ 10 / 2 }} <!-- Output: 5 -->
        {{ 10 % 3 }} <!-- Output: 1 -->
    </div>
```

**Comparison / Relational Operators:** These operators are used to compare two values and return a **boolean** result. AngularJS supports comparison operators like **equal to (==),** not equal to **(!=)**, strict equal to **(===),** strict not equal to **(!==),** greater than **(>),** less than **(<),** greater than or equal to **(>=),** and less than or equal to **(<=).**

## Example –

```html
    <div class="container">
        {{ 5 == 5 }} <!-- Output: true -->
        {{ 10 != 5 }} <!-- Output: true -->
        {{ 5 === '5' }} <!-- Output: false -->
        {{ 5 !== '5' }} <!-- Output: true -->
        {{ 10 > 5 }} <!-- Output: true -->
        {{ 5 < 10 }} <!-- Output: true -->
        {{ 10 >= 10 }} <!-- Output: true -->
        {{ 5 <= 10 }} <!-- Output: true -->
    </div>
```

**Logical Operators:** AngularJS supports logical operators like logical AND **(&&),** logical OR **(||),** and logical NOT **(!).**

## Example –

```html
    <div class="container">
        {{ true && false }} <!-- Output: false -->
        {{ true || false }} <!-- Output: true -->
        {{ !true }} <!-- Output: false -->
    </div>
```

**Assignment Operators:** AngularJS supports the standard assignment operator (=).

## Example –

```html
        {{ x = 5 }} <!-- Assigns 5 to x -->
        {{x = 10}}
        {{x}}
```

**String Concatenation Operator:** AngularJS uses the '+' operator for string concatenation.

## Example –

```html
{{ 'Hello, ' + 'world!' }} <!-- Output: Hello, world! -->
```

**Conditional Operator:** The conditional operator **(also known as the ternary operator)** in AngularJS is a concise way to write conditional statements. It's often used as a shorthand for simple if-else statements. In AngularJS, you can use the conditional operator within expressions to conditionally display content or assign values based on a condition.

## Syntax –

condition ? expression1 : expression2

- If condition evaluates to **true**, **expression1** is executed.
- If condition evaluates to **false**, **expression2** is executed.

## Example -

```html
<!DOCTYPE html>
<!-- define root module -->
<html lang="en" data-ng-app="myModule">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- attach the bootstrap 5.3.3 library -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- attach the angular js library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>

    <!-- access the ArithmaticController as ac for my child nodes -->
    <div class="container border" data-ng-controller="ArithmaticController as ac">
        <p class="fw-bold">Arithmatic Operators </p>
        <div>
            <p>{{ac.x + ac.y}}</p> <!-- solve this calculation using angular js expration -->
            <p data-ng-bind="ac.y-ac.x"></p> <!-- solve this calculation using angular js bind directive -->
            <p>ac.x * ac.y = {{ac.x*ac.y}}</p> <!-- solve this calculation using angular js expration with some fix text -->
            <p data-ng-bind="'ac.y * ac.x = ' + (ac.y / ac.x)"></p> <!-- solve this calculation using angular js bind directive with fix text -->
            <p>
                <span>ac.y % ac.x = </span>
                <span data-ng-bind="ac.y % ac.x"></span>
            </p>
        </div>

        <!-- I am create an iteration or operators for evaluate the expretions -->
        <div class=" ">
            <hr>
            <!-- show x and y values only using the angular expretions -->
            <span>ac.x = {{ac.x}}, ac.y = {{ac.y}}</span>
            <hr>
            <!-- create a loop or iterations of 'operators'  -->
            <div class="" data-ng-repeat="operator in ac.operators" > <!-- this statement iterate over an array of operators -->
                <span>
                    ac.x <!-- print the variable name -->
                    <span data-ng-bind="operator" class="text-danger fw-bold"></span> <!-- bind the operator using bind directive -->
                    ac.y <!-- print the variable name -->
                     =>  <!-- print the '=>'  -->
                    {{ac.evaluate('' + ac.x + operator + ac.y + '')}} <!-- call evaluate() using controller 'ac'  -->
                </span>
            </div>
        </div>
    </div>
    <!-- Access the ConditionalController  -->
    <div class="container" ng-controller="ConditionalController">
        <div>
            <p data-ng-bind="isMorning"></p>
            <!-- Conditional operator binding -->
            <p ng-bind="isMorning ? 'Good morning!' : 'Good day!'"></p>
        </div>
    </div>

    <script>
        // Create 'myModule' for my angular js program, it's handle the internal request
        var app = angular.module("myModule", [])
        .controller('ArithmaticController', function($scope){ // Create 'ArithmaticController' controller
            var ac = this;
            ac.x = 10;
            ac.y = 51;
            //define the array of operator
            ac.operators = ['+', '-', '/', '%', '*', '==', '===', '>', '>=', '<', '<=', '&&', '&', '||', '|'];
            //this function return the 'expration' result after evaluating
            ac.evaluate = function(expration){
                return eval(expration);
            };
        })
        .controller('ConditionalController', function ($scope) {
            var currentTime = new Date().getHours();
            $scope.isMorning = currentTime < 12;
        });
    </script>

</body>
</html>
```

Thank You,

I hope you understand with **“operators”** in AngulaJS.


---

Original Source: https://www.mindstick.com/forum/160652/how-to-use-operators-in-angularjs-with-examples

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
