diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index c49c0568db..1872b1296f 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -146,28 +146,25 @@ block notable-differences * new [template expression operators](#expression-operators), such as `|` and `?.` h3#expression-context Expression context - -.alert.is-critical - :marked - Ward: you wanted to have a note here per our slack conversation where you said, - "The context for terms in an expression is a blend of the data-bound component - and the directive's context (if it has one). The latter wins when the term is a property of both." - :marked - The *expression context* is typically the component instance. - In the following examples, the *title* within double-curly braces, `{{title}}` is a property of the data-bound component. - In `[hidden]="isUnchanged"`, - _isUnchanged_ refers to the component's `isUnchanged` property. + The *expression context* is typically the _component_ instance. + In the following snippets, the `title` within double-curly braces and the + `isUnchanged` in quotes refer to properties of the `AppComponent`. +makeExample('template-syntax/ts/src/app/app.component.html', 'context-component-expression')(format=".") :marked - The expression may also refer to properties of the template's own context + An expression may also refer to properties of the _template's_ context such as a [template input variable](#template-input-variable) (`let hero`) or a [template reference variable](#ref-vars) (`#heroInput`). +makeExample('template-syntax/ts/src/app/app.component.html', 'context-var')(format=".") :marked - Template context property names take precedence over component context names. - In `{{hero}}` above, the `hero` is the template input variable, not the component's `hero` property. + The context for terms in an expression is a blend of the _template variables_, + the directive's _context_ object (if it has one), and the component's _members_. + If you reference a name that belongs to more than one of these namespaces, + the tempate variable name takes precedence, followed by a name in the directive's' _context_, + and, lastly, the component's member names. + + The previous example presents such a name collision. The component has a `hero` property and the `*ngFor` defines a `hero` template variable. The `hero` in `{{hero}}` refers to the template input variable, not the component's property. block template-expressions-cannot :marked @@ -1480,22 +1477,14 @@ a#inputs-outputs You have *limited* access to members of a **target** directive. You can only bind to properties that are explicitly identified as *inputs* and *outputs*. :marked - In the following example, `iconUrl` and `onSave` are members of a component - that are referenced within quoted syntax to the right of the `=`. + In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent` + and are referenced within quoted syntax to the _right_ of the equals (`=`). +makeExample('template-syntax/ts/src/app/app.component.html', 'io-1')(format=".") :marked - They are *neither inputs nor outputs* of the component. They are data sources for their bindings. + They are *neither inputs nor outputs* of the component. They are **sources** for their bindings. + The targets are the native `` and `