Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

How to change default value printing symbols in Angular JS ?

This tutorial is brief and easy way to change the default Angular JS value printing symbols ‘{{‘ and ‘}}’ into something else.


This tutorial is very short one, recently while working on a Symfony project along with Angular JS we had a small little problem, as the twig in symfony uses ‘{{‘, ‘}}’ and so does Angular JS, to print the values in view. So to avoid the conflict between these two we had to change either of them. We choose to change second, Angular JS.

As mentioned earlier this is short tutorial and thus one can guess, this is easy. Angular comes up with Interpolate Provider which helps to change the start and end symbols. In the code below we show a very simple example.

The key is to configure the angular app by passing $interpolateProvider and changing the start and end symbols.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!doctype html>
<html>
<head>
<title>
Angular JS Changing Default Inerpolating Symbols
</title>
</head>
<body ng-app="demoApp">
<div ng-controller="demoController">
<p>
hello [world]!
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" ></script>
<script>
(function(){
var app = angular.module("demoApp",[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[').endSymbol(']');
});
app.controller("demoController",["$scope",function($scope){
$scope.world = "world";
}]);
})();
</script>
</body>
</html>
<!doctype html> <html> <head> <title> Angular JS Changing Default Inerpolating Symbols </title> </head> <body ng-app="demoApp"> <div ng-controller="demoController"> <p> hello [world]! </p> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" ></script> <script> (function(){ var app = angular.module("demoApp",[]).config(function($interpolateProvider){ $interpolateProvider.startSymbol('[').endSymbol(']'); }); app.controller("demoController",["$scope",function($scope){ $scope.world = "world"; }]); })(); </script> </body> </html>
<!doctype html>
<html>
	<head>
		<title>
			Angular JS Changing Default Inerpolating Symbols
		</title>
	</head>
	<body ng-app="demoApp">
		<div ng-controller="demoController">
			<p>
				hello [world]!
			</p>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" ></script>
		<script>
			(function(){
			    var app = angular.module("demoApp",[]).config(function($interpolateProvider){
        			$interpolateProvider.startSymbol('[').endSymbol(']');
    			});

			    app.controller("demoController",["$scope",function($scope){
        			$scope.world = "world";
        		}]);
			})();
		</script>
	</body>
</html>

The code is self explaining, we passed the $interpolateProvider in config and changed the start and end symbol. Yes, that is it. As you can see in the example code we have used same old “hello world” example, where we pass the “world” through Angular JS.

As promised we keep this short one, hope you find it useful.

Buy Me A Coffee
If you find my content helpful, please consider supporting me!