Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 6924bce

Browse files
wardbellFoxandxss
authored andcommitted
docs(template-syntax): remove notes for Ward (#3247)
1 parent 87674d9 commit 6924bce

File tree

1 file changed

+16
-27
lines changed

1 file changed

+16
-27
lines changed

public/docs/ts/latest/guide/template-syntax.jade

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -146,28 +146,25 @@ block notable-differences
146146
* new [template expression operators](#expression-operators), such as `|` and `?.`
147147

148148
h3#expression-context Expression context
149-
150-
.alert.is-critical
151-
:marked
152-
Ward: you wanted to have a note here per our slack conversation where you said,
153-
"The context for terms in an expression is a blend of the data-bound component
154-
and the directive's context (if it has one). The latter wins when the term is a property of both."
155-
156149
:marked
157-
The *expression context* is typically the component instance.
158-
In the following examples, the *title* within double-curly braces, `{{title}}` is a property of the data-bound component.
159-
In `[hidden]="isUnchanged"`,
160-
_isUnchanged_ refers to the component's `isUnchanged` property.
150+
The *expression context* is typically the _component_ instance.
151+
In the following snippets, the `title` within double-curly braces and the
152+
`isUnchanged` in quotes refer to properties of the `AppComponent`.
161153

162154
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-component-expression')(format=".")
163155
:marked
164-
The expression may also refer to properties of the template's own context
156+
An expression may also refer to properties of the _template's_ context
165157
such as a [template input variable](#template-input-variable) (`let hero`)
166158
or a [template reference variable](#ref-vars) (`#heroInput`).
167159
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-var')(format=".")
168160
:marked
169-
Template context property names take precedence over component context names.
170-
In `{{hero}}` above, the `hero` is the template input variable, not the component's `hero` property.
161+
The context for terms in an expression is a blend of the _template variables_,
162+
the directive's _context_ object (if it has one), and the component's _members_.
163+
If you reference a name that belongs to more than one of these namespaces,
164+
the tempate variable name takes precedence, followed by a name in the directive's' _context_,
165+
and, lastly, the component's member names.
166+
167+
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.
171168

172169
block template-expressions-cannot
173170
:marked
@@ -1480,22 +1477,14 @@ a#inputs-outputs
14801477
You have *limited* access to members of a **target** directive.
14811478
You can only bind to properties that are explicitly identified as *inputs* and *outputs*.
14821479
:marked
1483-
In the following example, `iconUrl` and `onSave` are members of a component
1484-
that are referenced within quoted syntax to the right of the `=`.
1480+
In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent`
1481+
and are referenced within quoted syntax to the _right_ of the equals (`=`).
14851482
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-1')(format=".")
14861483
:marked
1487-
They are *neither inputs nor outputs* of the component. They are data sources for their bindings.
1484+
They are *neither inputs nor outputs* of the component. They are **sources** for their bindings.
1485+
The targets are the native `<img>` and `<button>` elements.
14881486

1489-
.alert.is-critical
1490-
:marked
1491-
Ward: I was momentarily uncertain below because the instructions say to look
1492-
at `HeroDetailComponent` but it doesn't occur explicitly in the code sample.
1493-
In the following paragraph I then see `HeroDetailComponent.hero` and think,
1494-
"hm, ok, I guess that means we're inside `HeroDetailComponent`", but my
1495-
assumption feels wobbly.
1496-
1497-
:marked
1498-
Now look at `HeroDetailComponent` when it is the **target of a binding**.
1487+
Now look at a another snippet in which the `HeroDetailComponent` is the **target** of a binding on the _left_ of the equals&nbsp;(`=`).
14991488
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-2')(format=".")
15001489
:marked
15011490
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.

0 commit comments

Comments
 (0)