angular/aio/content/guide/interpolation.md
Ward Bell b08323747e docs: Migrate 2nd set of template guide pages and code to Standalone (#51632)
Supplements PR 51364 Template Migration with overlooked pages and examples

Code migrated: `inputs-outputs`, `interpolation`, `property-binding`
Guide pages affected:
* `binding-overview.md`
* `event-binding.md` (already migrated; updated with link to explain passive events)
* `inputs-outputs.md`
* `interpolation.md`
* `property-binding-best-practices.md`
* `property-binding.md`
* `understanding-template-expr-overview.md` (archived)

E2E tests passed locally.

PR Close #51632
2023-09-12 12:21:32 -07:00

1.3 KiB

Displaying values with interpolation

Prerequisites

Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters.

To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:

Use interpolation to display the value of this variable in the corresponding component template:

Angular replaces currentCustomer with the string value of the corresponding component property. In 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.

What's Next

@reviewed 2023-09-01