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.

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

13 thoughts on “How to change default value printing symbols in Angular JS ?”