Text interpolation allows you to incorporate dynamic string values into your HTML templates.\nWith interpolation, you can dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
\nSee the
Interpolation refers to embedding expressions into marked up text.\nBy default, interpolation uses the double curly braces {{ and }} as delimiters.
To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:
You can use interpolation to display the value of this variable in the corresponding component template:
\nAngular replaces currentCustomer with the string value of the corresponding component property.\nIn this case, the value is Maria.
In the following example, Angular evaluates the title and itemImageUrl properties to display some title text and an image.
A template expression produces a value and appears within double curly braces, {{ }}.\nAngular resolves the expression and assigns it to a property of a binding target.\nThe target could be an HTML element, a component, or a directive.
More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string.\nThe following interpolation illustrates the point by adding two numbers:
\nExpressions can also invoke methods of the host component such as getVal() in the following example:
With interpolation, Angular performs the following tasks:
\nYou can configure the interpolation delimiter with the interpolation option in the @Component() metadata.
Template expressions are similar to JavaScript.\nMany JavaScript expressions are legal template expressions, with the following exceptions.
\nYou can't use JavaScript expressions that have or promote side effects, including:
\n=, +=, -=, ...)new, typeof, or instanceof; or ,++ and --Other notable differences from JavaScript syntax include:
\n| and &|, ?. and !Interpolated expressions have a context—a particular part of the application to which the expression belongs.\nTypically, this context is the component instance.
\nIn the following snippet, the expression recommended and the expression itemImageUrl2 refer to properties of the AppComponent.
An expression can also refer to properties of the template's context such as a template input variable or a template reference variable.
\nThe following example uses a template input variable of customer.
This next example features a template reference variable, #customerInput.
Template expressions cannot refer to anything in the global namespace, except undefined.\nThey can't refer to window or document.\nAdditionally, they can't call console.log() or Math.max() and they are restricted to referencing members of the expression context.
The context against which an expression evaluates is the union of the template variables, the directive's context object—if it has one—and the component's members.\nIf you reference a name that belongs to more than one of these namespaces, Angular applies the following logic to determine the context:
\nTo avoid variables shadowing variables in another context, keep variable names unique.\nIn the following example, the AppComponent template greets the customer, Padma.
An ngFor then lists each customer in the customers array.
The customer within the ngFor is in the context of an <ng-template> and so refers to the customer in the customers array, in this case Ebony and Chiho.\nThis list does not feature Padma because customer outside of the ngFor is in a different context.\nConversely, customer in the <h1> doesn't include Ebony or Chiho because the context for this customer is the class and the class value for customer is Padma.
When using template expressions, follow these best practices:
\nUse short expressions
\nUse property names or method calls whenever possible.\nKeep application and business logic in the component, where it is easier to develop and test.
\nQuick execution
\nAngular executes template expressions after every change detection cycle.\nMany asynchronous activities trigger change detection cycles, such as promise resolutions, HTTP results, timer events, key presses and mouse moves.
\nExpressions should finish quickly to keep the user experience as efficient as possible, especially on slower devices.\nConsider caching values when their computation requires greater resources.
\nNo visible side effects
\nAccording to Angular's unidirectional data flow model, a template expression should not change any application state other than the value of the target property.\nReading a component value should not change some other displayed value.\nThe view should be stable throughout a single rendering pass.
\nAn idempotent expression is free of side effects and improves Angular's change detection performance.\nIn Angular terms, an idempotent expression always returns exactly the same thing until one of its dependent values changes.
\n Dependent values should not change during a single turn of the event loop.\nIf an idempotent expression returns a string or a number, it returns the same string or number if you call it twice consecutively.\nIf the expression returns an object, including an array, it returns the same object reference if you call it twice consecutively.
There is one exception to this behavior that applies to *ngFor.\n*ngFor has trackBy functionality that can deal with changing values in objects when iterating over them.\nSee *ngFor with trackBy for details.