5 lines
6.5 KiB
JSON
5 lines
6.5 KiB
JSON
{
|
||
"id": "guide/template-statements",
|
||
"title": "Template statements",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/template-statements.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-statements\">Template statements<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-statements#template-statements\"><i class=\"material-icons\">link</i></a></h1>\n<p>Template statements are methods or properties that you can use in your HTML to respond to user events.\nWith template statements, your application can engage users through actions such as displaying dynamic content or submitting forms.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example name=\"template-syntax\">Template syntax</live-example> for\nthe syntax and code snippets in this guide.</p>\n</div>\n<p>In the following example, the template statement <code>deleteHero()</code> appears in quotes to the right of the <code>=</code> symbol as in <code>(event)=\"statement\"</code>.</p>\n<code-example path=\"template-syntax/src/app/app.component.html\" region=\"context-component-statement\" header=\"src/app/app.component.html\">\n<button (click)=\"deleteHero()\">Delete hero</button>\n\n</code-example>\n<p>When the user clicks the <strong>Delete hero</strong> button, Angular calls the <code>deleteHero()</code> method in the component class.</p>\n<p>You can use template statements with elements, components, or directives in response to events.</p>\n<div class=\"alert is-helpful\">\n<p>Responding to events is an aspect of Angular's <a href=\"guide/glossary#unidirectional-data-flow\">unidirectional data flow</a>.\nYou can change anything in your application during a single event loop.</p>\n</div>\n<h2 id=\"syntax\">Syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-statements#syntax\"><i class=\"material-icons\">link</i></a></h2>\n<p>Like <a href=\"guide/interpolation\">template expressions</a>, template statements use a language that looks like JavaScript.\nHowever, the parser for template statements differs from the parser for template expressions.\nIn addition, the template statements parser specifically supports both basic assignment, <code>=</code>, and chaining expressions with semicolons, <code>;</code>.</p>\n<p>The following JavaScript and template expression syntax is not allowed:</p>\n<ul>\n<li><code>new</code></li>\n<li>increment and decrement operators, <code>++</code> and <code>--</code></li>\n<li>operator assignment, such as <code>+=</code> and <code>-=</code></li>\n<li>the bitwise operators, such as <code>|</code> and <code>&</code></li>\n<li>the <a href=\"guide/pipes\">pipe operator</a></li>\n</ul>\n<h2 id=\"statement-context\">Statement context<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-statements#statement-context\"><i class=\"material-icons\">link</i></a></h2>\n<p>Statements have a context—a particular part of the application to which the statement belongs.</p>\n<p>Statements can refer only to what's in the statement context, which is typically the component instance.\nFor example, <code>deleteHero()</code> of <code>(click)=\"deleteHero()\"</code> is a method of the component in the following snippet.</p>\n<code-example path=\"template-syntax/src/app/app.component.html\" region=\"context-component-statement\" header=\"src/app/app.component.html\">\n<button (click)=\"deleteHero()\">Delete hero</button>\n\n</code-example>\n<p>The statement context may also refer to properties of the template's own context.\nIn the following example, the component's event handling method, <code>onSave()</code> takes the template's own <code>$event</code> object as an argument.\nOn the next two lines, the <code>deleteHero()</code> method takes a <a href=\"guide/structural-directives#shorthand\">template input variable</a>, <code>hero</code>, and <code>onSubmit()</code> takes a <a href=\"guide/template-reference-variables\">template reference variable</a>, <code>#heroForm</code>.</p>\n<code-example path=\"template-syntax/src/app/app.component.html\" region=\"context-var-statement\" header=\"src/app/app.component.html\">\n<button (click)=\"onSave($event)\">Save</button>\n<button *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\" (click)=\"deleteHero(hero)\">{{hero.name}}</button>\n<form #heroForm (ngSubmit)=\"onSubmit(heroForm)\"> ... </form>\n\n</code-example>\n<p>In this example, the context of the <code>$event</code> object, <code>hero</code>, and <code>#heroForm</code> is the template.</p>\n<p>Template context names take precedence over component context names.\nIn the preceding <code>deleteHero(hero)</code>, the <code>hero</code> is the template input variable, not the component's <code>hero</code> property.</p>\n<h2 id=\"statement-best-practices\">Statement best practices<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/template-statements#statement-best-practices\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p><strong>Conciseness</strong></p>\n<p>Keep template statements minimal by using method calls or basic property assignments.</p>\n</li>\n<li>\n<p><strong>Work within the context</strong></p>\n<p>The context of a template statement can be the component class instance or the template.\nBecause of this, template statements cannot refer to anything in the global namespace such as <code>window</code> or <code>document</code>.\nFor example, template statements can't call <code>console.log()</code> or <code>Math.max()</code>.</p>\n</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/binding-syntax\n - guide/template-syntax\n - guide/user-input\n-->\n<!-- links from this doc:\n - api/common/NgForOf\n - guide/glossary#unidirectional-data-flow\n - guide/interpolation\n - guide/pipes\n - guide/structural-directives#shorthand\n - guide/template-reference-variables\n - guide/template-statements#statement-best-practices\n - guide/template-statements#statement-context\n - guide/template-statements#syntax\n - guide/template-statements#template-statements\n - https://github.com/angular/angular/edit/master/aio/content/guide/template-statements.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |