Interpolation is used for one-way data binding in Angular. It embeds an expression into the HTML template. By default, expression should be surrounded by {{ and }}. This expression is also known as template expression.
{{ expression }}Angular evaluates an expression surrounded by {{ and }} and then converts a result to a string and assigns it to an element or directive property.
{{ expression }} output=> stringThe following example evaluates an arithmetic expression, converts the result into a string.
Example: Interpolation
<p> 2 + 2 = {{ 2 + 2 }} </p> <!-- output: "2 + 2 = 4" --><p> 2 * 3 = {{ 2 * 3 }} </p> <!-- output:`"2 * 3 = 6" --><p> {{ “2 + 2 != ”+ 2 + 2 }} </p> <!-- output:"2 + 2 != 22" --><p> {{ “2 + 2 = ”+ (2 + 2) }} </p> <!-- output:"2 + 2 = 4" -->The context of the interpolation expression is a component class. It means it can access public properties or methods of a component class. However, it cannot access private or protected members.
Consider the following component class.
Example: Angular Component
export class InterpolationDemo implements OnInit { public text: string = "Hello"; public caption: string = "Click Me!"; num: number = 0; randomNums: number[] = [3, 6, 7, 8, 1, 122, 44, 67, 790]; private count:number = 0; ngOnInit(): void { } getCurrentTime(): any { return Date.now(); }}The HTML template of the above component can use members as an expression in interpolation, as shown below.
Example: Interpolation
<p>{{ text }} </p><p>{{ num }} </p><p>{{ getCurrentTime() }} </p><button innerText={{caption}}></button>It can also use template input variable, as shown below.
Example: Input Variable
<ul> <li *ngFor="let rndNum of randomNums">{{rndNum}}</li></ul>Most JavaScript expressions are valid template expression except the following: - Assignment, bitwise, increment and decrement perators (=,+=, -=, |, &, ++, –,!, ?. etc.) - new, typeof, instanceof, etc. - chaining expression with ; or , - some ES2015+ operators
The following will give a compile-time error.
Example: Invalid Interpolation
<p>{{ num++ }} </p><p>{{ num += 1}} </p><p>{{ count}} </p><p>{{ typeof(num) }} </p><p>{{ Date.now()}} </p><p>{{ window.name}} </p><p>{{ console.log('This is an error')}} </p>Configure Interpolation Delimiter
Note:
By default, Angular use {{ and }} delimiter. However, you can configure it and specify different delimiter using the interpolation option in the @Component decorator.
For example, the following configures ? and ? as starting and ending interpolation delimiter.
Example: Custom Delimiter
@Component({ selector: 'app-event-binding-demo', interpolation:['?','?'],})Thus, interpolation is an easy way of one-way data binding using template expression.
