AngularJS Interpolation



  • Interpolation markup with embedded expressions will provide data-binding to text nodes and attribute values.
  • The AngularJS allows the user to manually run the template compilation.
  • Interpolation allows us to live update a string of text based upon conditions of a scope, for instance.
  • To run an interpolation on a string template, we need to inject the $interpolate service in our application.
  • The $interpolate service is used to compile a string with markup into an interpolation function.
  • The $interpolate service is used by the HTML $compiles service for data binding.
  • The compiler adds the $watch method for watches the changes in the string.
  • If we want to use different beginning and ending symbols in our application for binding the string, we can modify them by configuring the $interpolateProvider.
  • The default symbol of expression is {{ (open curly braces) and }} (closing curly braces).
  • To modify the beginning string, we can set the starting symbol with the startSymbol() method.
  • To modify the ending string, we can set the ending symbol with the endSymbol() method.

Example for interpolation:

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

Methods of Interpolation in AngularJS:

Methods Description
startSymbol() This method is used the symbol to denote the start of expression in the interpolated string. Default to {{.
endSymbol() This method is used the symbol to denote the end of expression in the interpolated string. Default to }}.

Syntax for Interpolation in AngularJS:

Syntax for $interpolate service

$interpolate (text, [mustHaveExpression], [trustedContext], [allOrNothing]);

Parameter value for $interpolate Service in AngularJS:

Value Type Description
text string The text with markup to interpolate.
mustHaveExpression(optional) boolean If set to true, then the interpolation string must have embedded expression in order to return an interpolation function. String with no embedded expression will return null for the interpolation function.
trustedContext(optional) string When provided, the returned function passes the interpolated result through $sce.getTrusted(interpolatedResult, trustedContext) before returning it.
allOrNothing(optional) boolean if true then the returned function returns undefined unless all embedded expressions evaluate to a value other than undefined.

Syntax for $interpolateProvider

app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol([value]);
  $interpolateProvider.endSymbol([value]);
});

Parameter value for $interpolateProvider in AngularJS:

Value Type Description
value (optional) string New value to set the starting symbol to.
value (optional) string New value to set the ending symbol to.

Sample code for Interpolation with $interpolateProvider in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <h2>Interpolation in AngularJS Tutorials</h2>
        <div ng-app="myApp" ng-controller="myCtrl" >
            <h4>-msg-</h4>
        </div>
        <script>
            var app= angular.module('myApp', [])
            app.config(function($interpolateProvider) {
                $interpolateProvider.startSymbol('-');
                $interpolateProvider.endSymbol('-');
            });   
            app.controller("myCtrl",["$scope", function($scope){
                 $scope.msg= "Welcome To AngularJS Tutorials";
            }]);                    
        </script>
    </body>
</html>

$interpolateProvider:

  • $interpolateProvider configuration of Application Module.
 var app= angular.module('myApp', [])
 app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('-');
    $interpolateProvider.endSymbol('-');
 });

Code Explanation for $interpolateProvider in AngularJS:

Code Explanation for AngularJS Interpolation

  1. The AngularJS application is defined by ng-app="myApp" and the ng-controller is used to control the application. The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
  2. The -msg- is used to bind the msg value.
  3. The angular.module used to create an Application module for “myApp” module.
  4. The app.config is used to configure the application with interpolation by using the $interpolateProvider.
  5. The $interpolateProvider.startSymbol('-') is used to set the “-“ symbol as the starting symbol.
  6. The $interpolateProvider.endSymbol('-') is used to set the “-“ symbol as the ending symbol.
  7. The “myCtrl” used to create the controller for the Application with arguments $scope object and function($scope).
  8. The $scope.msg is used to set the value of msg as “Welcome To AngularJS Tutorials”.

Sample Output for $interpolateProvider in AngularJS:

Sample Output for AngularJS Interpolation

  1. The output shows that “Welcome To AngularJS Tutorials” msg is displays by using interpolation with the $interpolateProvider methods. Here we used the “-“ as starting symbol and “-“ as ending symbol.


Related Searches to angularjs Interpolation