How to concat strings using AngularJS ?

Last Updated : 26 Jul, 2024

In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.

Example 1: In the first example, we are using the '+' operator to concat the strings

<!DOCTYPE HTML> 
<html> 

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str1 = 'This is ';
            $scope.str2 = 'GeeksForGeeks';
            $scope.res = '';
            $scope.join = function() {
                $scope.res = $scope.str1 + $scope.str2;
            };
        });
    </script>
</head>

<body style = "text-align:center;">
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1>

    <p>
        How to concat strings in AngularJS
    </p>

    <div ng-app = "app">  
        <div ng-controller = "controller">
            str1 - '{{str1}}'
            <br>
            str2 - '{{str2}}'
            <br>
            <br>
            <input type = "button" 
                ng-click = "join()" value = "Click Here">
            <br>
            
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>   

</html>

 
<!DOCTYPE HTML> 
<html> ​<head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>    <script>        var myApp = angular.module("app", []);        myApp.controller("controller", function($scope) {            $scope.str1 = 'This is ';            $scope.str2 = 'GeeksForGeeks';            $scope.res = '';            $scope.join = function() {                $scope.res = $scope.str1 + $scope.str2;            };        });    </script></head>​<body style = "text-align:center;">    <h1 style = "color:green;">          GeeksForGeeks      </h1>​    <p>        How to concat strings in AngularJS    </p>​    <div ng-app = "app">          <div ng-controller = "controller">            str1 - '{{str1}}'            <br>            str2 - '{{str2}}'            <br>            <br>            <input type = "button"                 ng-click = "join()" value = "Click Here">            <br>                        <p>Result = '{{res}}'</p>        </div>    </div></body>   ​</html>

Output:

Example 2: In the second example we will use the standard concat() method for concatenation.