docs(template-syntax): finish pass on template-syntax.jade

Author: kapunahelewong

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

@@ -14,7 +14,7 @@ style.
 
 :marked
   The Angular application manages what the user sees and can do, achieving this through the interaction of a 
-  Component class instance (the *component*) and its user-facing template.
+  component class instance (the *component*) and its user-facing template.
 
   You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). 
   In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
@@ -76,7 +76,7 @@ code-example(language="html" escape="html").
   You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes. 
   In the following sections, you'll learn how to get and set DOM (Document Object Model) values dynamically through data binding.
 
-  Begin with the first form of data binding — interpolation — to see how much richer template HTML can be.
+  Begin with the first form of data binding—interpolation—to see how much richer template HTML can be.
 
 a(href="#toc") back to top
 
@@ -147,6 +147,12 @@ block notable-differences
 
 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.
@@ -381,7 +387,7 @@ table(width="100%")
 +makeExample('template-syntax/ts/app/app.component.html', 'disabled-button-1')(format=".")
 :marked
   You'll get to that peculiar bracket notation in a moment. Looking beyond it,
-  your intuition suggest that you're binding to the button's `disabled` attribute and setting
+  your intuition suggests that you're binding to the button's `disabled` attribute and setting
   it to the current value of the component's `isUnchanged` property.
 
   Your intuition is incorrect! Your everyday HTML mental model is misleading.
@@ -442,7 +448,7 @@ table(width="100%")
     When you write a data binding, you're dealing exclusively with properties and events of the target object.
     HTML attributes effectively disappear.
 :marked
-  With this model firmly in mind, let's learn about binding targets.
+  With this model firmly in mind, read on to learn about binding targets.
 
   ### Binding targets
   The **target of a data binding** is something in the DOM.
@@ -615,7 +621,7 @@ a(id="one-time-initialization")
   ### One-time string initialization
   You *should* omit the brackets when all of the following are true:
   * The target property accepts a string value.
-  * The string is a fixed value that directive can bake into the template.
+  * The string is a fixed value that you can bake into the template.
   * This initial value never changes.
 
   You routinely initialize attributes this way in standard HTML, and it works
@@ -785,7 +791,7 @@ a(href="#toc") back to top
 a#event-binding
 :marked
   ## Event binding  ( <span class="syntax">(event)</span> )
-  The bindings directive've met so far flow data in one direction: **from a component to an element**.
+  The bindings directives you've met so far flow data in one direction: **from a component to an element**.
 
   Users don't just stare at the screen. They enter text into input boxes. They pick items from lists.
   They click buttons. Such user actions may result in a flow of data in the opposite direction:
@@ -840,6 +846,12 @@ a#event-binding
 
   Consider this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
+
+.alert.is-critical
+  :marked
+    Ward: `firstName` appears here (below) for the first time without any mention it was coming and isn't in the 
+    code sample. Do we mean `name` instead?
+
 :marked
   This code sets the input box `value` property by binding to the `firstName` property. To listen for changes to the value, the code binds to the input box's `input` event.
   When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`.
@@ -967,7 +979,7 @@ a#two-way
 
   Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
 
-  You'd like to use two-way binding with HTML form elements like `<input>` and `<select>`.
+  It would be convenient to use two-way binding with HTML form elements like `<input>` and `<select>`.
   However, no native HTML element follows the `x` value and `xChange` event pattern.
 
   Fortunately, the Angular [_NgModel_](#ngModel) directive is a bridge that enables two-way binding to form elements.
@@ -985,7 +997,7 @@ a#directives
 
   You don't need many of those directives in Angular.
   You can often achieve the same results with the more capable and expressive Angular binding system.
-  Why create a directive to handle a click when directive can write a simple binding such as this?
+  Why create a directive to handle a click when you can write a simple binding such as this?
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
   You still benefit from directives that simplify complex tasks.
@@ -1036,7 +1048,7 @@ a#ngClass
 :marked
   Consider a `setCurrentClasses` component method that sets a component property, 
   `currentClasses` with an object that adds or removes three classes based on the 
-  `true`/`false` state of three other component propertes:
+  `true`/`false` state of three other component properties:
 +makeExample('template-syntax/ts/app/app.component.ts', 'setClasses')(format=".")
 :marked
   Adding an `ngClass` property binding to `currentClasses` sets the element's classes accordingly:  
@@ -1078,7 +1090,8 @@ a(href="#toc") back to top
 a#ngModel
 :marked
   ### NgModel - Two-way binding to form elements with <span class="syntax">[(ngModel)]</span>
-  When developing data entry forms, directive often both display a data property and update that property when the user makes changes.
+  When developing data entry forms, you often both display a data property and 
+  update that property when the user makes changes.
 
   Two-way data binding with the `NgModel` directive makes that easy. Here's an example:
 +makeExcerpt('app/app.component.html', 'NgModel-1', '')
@@ -1088,7 +1101,7 @@ a#ngModel
     #### _FormsModule_ is required to use _ngModel_
 
     Before using the `ngModel` directive in a two-way data binding,
-    directive must import the `FormsModule` and add it to the Angular module's `imports` list.
+    you must import the `FormsModule` and add it to the Angular module's `imports` list.
     Learn more about the `FormsModule` and `ngModel` in the
     [Forms](../guide/forms.html#ngModel) guide.
 
@@ -1123,15 +1136,15 @@ a#ngModel
     You can't apply `[(ngModel)]` to a non-form native element or a third-party custom component until you write a suitable *value accessor*,
     a technique that is beyond the scope of this guide.
 
-    You don't need a _value accessor_ for an Angular component that you write ... because you can name the value and event properties
+    You don't need a _value accessor_ for an Angular component that you write because you can name the value and event properties
     to suit Angular's basic [two-way binding syntax](#two-way) and skip `NgModel` altogether.
     The [`sizer` shown above](#two-way) is an example of this technique.
 
 :marked
   Separate `ngModel` bindings is an improvement over binding to the element's native properties. You can do better.
 
   You shouldn't have to mention the data property twice. Angular should be able to capture the component's data property and set it
-  with a single declaration &mdash; which it can with the `[(ngModel)]` syntax:
+  with a single declaration, which it can with the `[(ngModel)]` syntax:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
 :marked
   Is `[(ngModel)]` all you need? Is there ever a reason to fall back to its expanded form?
@@ -1370,7 +1383,7 @@ figure.image-display
   Each component has a `hero` [input property](#inputs-outputs "Input property") 
   which is bound to the `currentHero` of the parent component.
 
-  Switch directives work as well with native elements and Web Components too.
+  Switch directives work as well with native elements and web components too.
   For example, you could replace the `<confused-hero>` switch case with the following.
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-div')(format=".")
 
@@ -1386,7 +1399,7 @@ a#ref-var
 :marked
   A **template reference variable** is often a reference to a DOM element within a template.
   It can also be a reference to an Angular component or directive or a 
-  <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" title="MDN: Web Components">Web Component</a>.
+  <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" title="MDN: Web Components">web component</a>.
 
   Use the hash symbol (#) to declare a reference variable.
   The `#phone` declares a `phone` variable on an `<input>` element.
@@ -1418,7 +1431,7 @@ a#ref-var
   The `heroForm` is actually a reference to an Angular [NgForm](../api/forms/index/NgForm-directive.html "API: NgForm") 
   directive with the ability to track the value and validity of every control in the form.
 
-  The native `<form>` element doesn't have a `form` propery.
+  The native `<form>` element doesn't have a `form` property.
   But the `NgForm` directive does, which explains how you can disable the submit button 
   if the `heroForm.form.valid` is invalid and pass the entire form control tree 
   to the parent component's `onSubmit` method.
@@ -1477,6 +1490,15 @@ a#inputs-outputs
 :marked
   They are *neither inputs nor outputs* of the component. They are data sources for their bindings.
 
+.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**.
 +makeExample('template-syntax/ts/app/app.component.html', 'io-2')(format=".")
 :marked