5 lines
14 KiB
JSON
5 lines
14 KiB
JSON
|
{
|
||
|
|
"id": "guide/interpolation",
|
||
|
|
"title": "Text interpolation",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/interpolation.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"text-interpolation\">Text interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/interpolation#text-interpolation\"><i class=\"material-icons\">link</i></a></h1>\n<p>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.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for all of the syntax and code snippets in this guide.</p>\n</div>\n<h2 id=\"displaying-values-with-interpolation\">Displaying values with interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/interpolation#displaying-values-with-interpolation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Interpolation refers to embedding expressions into marked up text.\nBy default, interpolation uses the double curly braces <code>{{</code> and <code>}}</code> as delimiters.</p>\n<p>To illustrate how interpolation works, consider an Angular component that contains a <code>currentCustomer</code> variable:</p>\n<code-example path=\"interpolation/src/app/app.component.ts\" region=\"customer\" header=\"src/app/app.component.ts\">\ncurrentCustomer = 'Maria';\n\n</code-example>\n<p>You can use interpolation to display the value of this variable in the corresponding component template:</p>\n<code-example path=\"interpolation/src/app/app.component.html\" region=\"interpolation-example1\" header=\"src/app/app.component.html\">\n<h3>Current customer: {{ currentCustomer }}</h3>\n\n</code-example>\n<p>Angular replaces <code>currentCustomer</code> with the string value of the corresponding component property.\nIn this case, the value is <code>Maria</code>.</p>\n<p>In the following example, Angular evaluates the <code>title</code> and <code>itemImageUrl</code> properties to display some title text and an image.</p>\n<code-example path=\"interpolation/src/app/app.component.html\" region=\"component-property\" header=\"src/app/app.component.html\">\n<p>{{title}}</p>\n<div><img src=\"{{itemImageUrl}}\"></div>\n\n</code-example>\n<h2 id=\"template-expressions\">Template expressions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/interpolation#template-expressions\"><i class=\"material-icons\">link</i></a></h2>\n<p>A template <strong>expression</strong> produces a value and appears within double curly braces, <code>{{ }}</code>.\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.</p>\n<h3 id=\"resolving-expressions-with-interpolation\">Resolving expressions with interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/interpolation#resolving-expressions-with-interpolation\"><i class=\"material-icons\">link</i></a></h3>\n<p>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:</p>\n<code-example path=\"interpolation/src/app/app.component.html\" region=\"convert-string\" header=\"src/app/app.component.html\">\n<!-- \"The sum of 1 + 1 is 2\" -->\n<p>The sum of 1 + 1 is {{1 + 1}}.</p>\n\n</code-example>\n<p>Expressions can also invoke methods of the host component such as <code>getVal()</code> in the following example:</p>\n<code-example path=\"interpolation/src/app/app.component.html\" region=\"invoke-method\" header=\"src/app/a
|
||
|
|
}
|