What is the interpolation? Say waht is "<h1>{{ title }}...

Return to site

What is the interpolation? Say waht is "<h1>{{ title }}</h1>"?

The interpolation is an alternative syntax to property binding.

Consider interpolation as a friendly syntax.

To use interpolation, we use double curly braces: {{ myVar}}.

The text between the curly braces is generally the name of the component property.

Then, Angular replaces this name with the value of the related component property.

Use cases:

//DO
<!-- Interpolation -->
<h1>{{ title }}</h1>👍
<!-- Property Binding -->
<img [src]="someSrc">👍
<button [disabled]="isDisabled"> 👍

//DON'T
<!-- Interpolation -->
<h1 [innerHTML]="title"></h1> 👎
<!-- Property Binding -->
<button disabled="{{isDisabled}}">👎

=>The interpolation is an alternative syntax to property binding which is more efficient for just data display in your template.