5 lines
16 KiB
JSON
5 lines
16 KiB
JSON
|
{
|
||
|
|
"id": "guide/template-reference-variables",
|
||
|
|
"title": "Template variables",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/template-reference-variables.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=\"template-variables\">Template variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-reference-variables#template-variables\"><i class=\"material-icons\">link</i></a></h1>\n<p>Template variables help you use data from one part of a template in another part of the template.\nWith template variables, you can perform tasks such as respond to user input or finely tune your application's forms.</p>\n<p>A template variable can refer to the following:</p>\n<ul>\n<li>a DOM element within a template</li>\n<li>a directive</li>\n<li>an element</li>\n<li><a href=\"api/core/TemplateRef\">TemplateRef</a></li>\n<li>a <a href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components\" title=\"MDN: Web Components\">web component</a></li>\n</ul>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"syntax\">Syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-reference-variables#syntax\"><i class=\"material-icons\">link</i></a></h2>\n<p>In the template, you use the hash symbol, <code>#</code>, to declare a template variable.\nThe following template variable, <code>#phone</code>, declares a <code>phone</code> variable on an <code><input></code> element.</p>\n<code-example path=\"template-reference-variables/src/app/app.component.html\" region=\"ref-var\" header=\"src/app/app.component.html\">\n<input #phone placeholder=\"phone number\" />\n\n</code-example>\n<p>You can refer to a template variable anywhere in the component's template.\nHere, a <code><button></code> further down the template refers to the <code>phone</code> variable.</p>\n<code-example path=\"template-reference-variables/src/app/app.component.html\" region=\"ref-phone\" header=\"src/app/app.component.html\">\n<input #phone placeholder=\"phone number\" />\n\n<!-- lots of other elements -->\n\n<!-- phone refers to the input element; pass its `value` to an event handler -->\n<button (click)=\"callPhone(phone.value)\">Call</button>\n\n</code-example>\n<h2 id=\"how-angular-assigns-values-to-template-variables\">How Angular assigns values to template variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-reference-variables#how-angular-assigns-values-to-template-variables\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular assigns a template variable a value based on where you declare the variable:</p>\n<ul>\n<li>If you declare the variable on a component, the variable refers to the component instance.</li>\n<li>If you declare the variable on a standard HTML tag, the variable refers to the element.</li>\n<li>If you declare the variable on an <code><ng-template></code> element, the variable refers to a <code><a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a></code> instance, which represents the template.\nFor more information on <code><ng-template></code>, see <a href=\"guide/structural-directives#asterisk\">How Angular uses the asterisk, <code>*</code>, syntax</a> in <a href=\"guide/structural-directives\">Structural directives</a>.</li>\n<li>\n<p>If the variable specifies a name on the right-hand side, such as <code>#var=\"<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>\"</code>, the variable refers to the directive or component on the element with a matching <code>exportAs</code> name.</p>\n<!-- What does the second half of this mean?^^ Can we explain this more fully? Could I see a working example? -kw -->\n</li>\n</ul>\n<h3 id=\"usin
|
||
|
|
}
|