anchor.diff:  // #docregion ngModel-6
   .l-sub-section
     :marked
  -    Internally, Angular maps the term `ngModel` to an `ngModel` input property and an
  -    `ngModelChange` output property.
  -    That’s a specific example of a more general pattern in which Angular matches `[(x)]` to an `x` input property
  -    for property binding and an `xChange` output property for event binding.
  +    `[(ngModel)]` is a specific example of a more general pattern in which Angular "de-sugars" the `[(x)]` syntax
  +    into an `x` input property for property binding and an `xChange` output property for event binding.
  +    Angular constructs the event property binding's template statement by appending `=$event` 
  +    to the literal string of the template expression.
  +  code-example(format="." ).
  +    [(x)]="hero.name" &lt;==> [x]="hero.name" (xChange)="hero.name=$event"
  +
   :marked
     Is `[(ngModel)]` all we need? Is there ever a reason to fall back to its expanded form?
   
  -  Well, `NgModel` can only set the target property.
  -  What if we need to do something more or something different when the user changes the value?
  -  Then we need to use the expanded form.
  +  The `[( )]` syntax can only set the data-bound property when the value changes.
  +  If we need to do something more or something different, we need to write the expanded form ourselves.
   
     Let's try something silly like forcing the input value to uppercase:
   // #enddocregion ngModel-6
  
positive.code: // #enddocregion directives-ngForTrackBy-3
  
  // #docregion star-template
  <a name="star-template"></a>
  <a name="structural-directive"></a>
  .l-main-section
  :marked
    ## * and &lt;template&gt;
  
negative.code: +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
  // #docregion ngModel-4
  :marked
    That’s cumbersome. Who can remember which element property to set and what event reports user changes?
    How do we extract the currently displayed text from the input box so we can update the data property?
    Who wants to look that up each time?
  
    That `ngModel` directive hides these onerous details behind its own  `ngModel` input and `ngModelChange` output properties.
  // #enddocregion ngModel-4
  +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-3')(format=".")
  // #docregion ngModel-5
  .l-sub-section
    :marked
      The `ngModel` input property sets the element's value property and the `ngModelChange` output property 
      listens for changes to the element's value.
      The details are specific to each kind of element and therefore the `NgModel` directive only works for elements
      that implement one of a few patterns such as the input box's `value` property and `change` event. 
      We can't simply apply `[(ngModel)]` to our custom components unless we write them to conform.
      
  :marked
    That’s an improvement, but it could be better.
  
  