Open In App

How to concat strings using AngularJS ?

Last Updated : 30 Sep, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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




<!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>


Output:

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

HTML




<!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>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads