mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
b08323747e
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
32 lines
1.3 KiB
Markdown
32 lines
1.3 KiB
Markdown
# Displaying values with interpolation
|
|
|
|
## Prerequisites
|
|
|
|
* [Basics of components](guide/architecture-components)
|
|
* [Basics of templates](guide/glossary#template)
|
|
* [Binding syntax](guide/binding-syntax)
|
|
|
|
<!--todo: needs a level 2 heading for info below -->
|
|
|
|
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:
|
|
|
|
<code-example path="interpolation/src/app/app.component.ts" region="customer"></code-example>
|
|
|
|
Use interpolation to display the value of this variable in the corresponding component template:
|
|
|
|
<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1"></code-example>
|
|
|
|
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.
|
|
|
|
<code-example path="interpolation/src/app/app.component.html" region="component-property"></code-example>
|
|
|
|
## What's Next
|
|
|
|
* [Property binding](guide/property-binding)
|
|
* [Event binding](guide/event-binding)
|
|
|
|
@reviewed 2023-09-01
|