Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 16 additions & 27 deletions public/docs/ts/latest/guide/template-syntax.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 `<img>` and `<button>` elements.

.alert.is-critical
:marked
Ward: I was momentarily uncertain below because the instructions say to look
at `HeroDetailComponent` but it doesn't occur explicitly in the code sample.
In the following paragraph I then see `HeroDetailComponent.hero` and think,
"hm, ok, I guess that means we're inside `HeroDetailComponent`", but my
assumption feels wobbly.

:marked
Now look at `HeroDetailComponent` when it is the **target of a binding**.
Now look at a another snippet in which the `HeroDetailComponent` is the **target** of a binding on the _left_ of the equals&nbsp;(`=`).
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-2')(format=".")
:marked
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
Expand Down