Skip to content
Related Articles

Related Articles

How to concat strings using AngularJS ?
  • Last Updated : 30 Sep, 2020

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 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head>
    <script src=
    </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>

chevron_right


Output:

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



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head>
    <script src=
    </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.concat($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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :