docs(template-syntax): remove notes for Ward (#3247)
This commit is contained in:
parent
87674d966d
commit
6924bce384
|
@ -146,28 +146,25 @@ block notable-differences
|
||||||
* new [template expression operators](#expression-operators), such as `|` and `?.`
|
* new [template expression operators](#expression-operators), such as `|` and `?.`
|
||||||
|
|
||||||
h3#expression-context Expression context
|
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
|
:marked
|
||||||
The *expression context* is typically the component instance.
|
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 the following snippets, the `title` within double-curly braces and the
|
||||||
In `[hidden]="isUnchanged"`,
|
`isUnchanged` in quotes refer to properties of the `AppComponent`.
|
||||||
_isUnchanged_ refers to the component's `isUnchanged` property.
|
|
||||||
|
|
||||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-component-expression')(format=".")
|
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-component-expression')(format=".")
|
||||||
:marked
|
: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`)
|
such as a [template input variable](#template-input-variable) (`let hero`)
|
||||||
or a [template reference variable](#ref-vars) (`#heroInput`).
|
or a [template reference variable](#ref-vars) (`#heroInput`).
|
||||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-var')(format=".")
|
+makeExample('template-syntax/ts/src/app/app.component.html', 'context-var')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Template context property names take precedence over component context names.
|
The context for terms in an expression is a blend of the _template variables_,
|
||||||
In `{{hero}}` above, the `hero` is the template input variable, not the component's `hero` property.
|
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
|
block template-expressions-cannot
|
||||||
:marked
|
:marked
|
||||||
|
@ -1480,22 +1477,14 @@ a#inputs-outputs
|
||||||
You have *limited* access to members of a **target** directive.
|
You have *limited* access to members of a **target** directive.
|
||||||
You can only bind to properties that are explicitly identified as *inputs* and *outputs*.
|
You can only bind to properties that are explicitly identified as *inputs* and *outputs*.
|
||||||
:marked
|
:marked
|
||||||
In the following example, `iconUrl` and `onSave` are members of a component
|
In the following snippet, `iconUrl` and `onSave` are data-bound members of the `AppComponent`
|
||||||
that are referenced within quoted syntax to the right of the `=`.
|
and are referenced within quoted syntax to the _right_ of the equals (`=`).
|
||||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-1')(format=".")
|
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-1')(format=".")
|
||||||
:marked
|
: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
|
Now look at a another snippet in which the `HeroDetailComponent` is the **target** of a binding on the _left_ of the equals (`=`).
|
||||||
: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**.
|
|
||||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-2')(format=".")
|
+makeExample('template-syntax/ts/src/app/app.component.html', 'io-2')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
|
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
|
||||||
|
|
Loading…
Reference in New Issue