How to concat strings using AngularJS ? - GeeksforGeeks

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
<!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.
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.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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?