anchor.diff:  
     A template **statement** responds to an **event** raised by a binding target
     such as an element, component, or directive.
  -
  +  
     模板**语句**用来响应由绑定目标（如HTML元素、组件或指令）触发的**事件**对象。
   
     We’ll see template statements in the [event binding](#event-binding) section,
     appearing in quotes to the right of the `=` symbol as in `(event)="statement"`.
  -
  +  
     我们将在[事件绑定](#event-binding)一节看到模板语句，它出现在`=`号右侧的引号中，就像这样：`(event)="statement"`。
   
     A template statement *has a side effect*.
     It's how we update application state from user input.
     There would be no point to responding to an event otherwise.
  -
  +  
     模板语句*有副作用*。
     这个副作用就是我们从用户的输入更新应用状态的方式。
     如果不是这样，我们就没办法响应一个事件。
  
positive.code:   #### 可见性和NgIf不是一回事
    We can show and hide an element subtree (the element and its children) with a
    [class](#class-binding) or [style](#style-binding) binding:
  
    我们可以通过[类绑定](#class-binding)或[样式绑定](#style-binding)来显示和隐藏一个元素的子树（元素及其子元素）。
  
  +makeExample('template-syntax/ts/app/app.component.html', 'NgIf-3')(format=".")
  :marked
    Hiding a subtree is quite different from excluding a subtree with `NgIf`.
  
    隐藏一个子树和用`NgIf`排除一个子树是截然不同的。
  
    When we hide the element subtree, it remains in the DOM.
    Components in the subtree are preserved, along with their state.
    Angular may continue to check for changes even to invisible properties.
    The subtree may tie up substantial memory and computing resources.
  
    当我们隐藏一个子树时，它仍然留在DOM中。
    子树中的组件及其状态仍然保留着。
    即使对于不可见属性，Angular也会继续检查变更。
  
negative.code:   ## Two-way binding with NgModel
    ## 使用NgModel进行双向数据绑定
    When developing data entry forms, we often want to both display a data property and update that property when the user makes changes.
    
    当开发数据输入表单时，我们通常希望既显示数据的属性，也在用户修改时更新那个属性。
  
    The `[(ngModel)]` two-way data binding syntax makes that easy. Here's an example:
  
    `[(NgModel)]`双向数据绑定语法让它变得简单，这里是例子：
  +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
  .callout.is-important
    header [()] = banana in a box
    header [()] = 盒子里的香蕉
    :marked
      To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
      
      要记住“方括号中的圆括号”这种语法，就把它想象成 *盒子里的香蕉* 吧，是不是很形象？
      （译注：中国读者记起来更简单，方括号又叫中括号，圆括号又叫小括号，显然应该中的在外，小的在内）
  :marked
    Alternatively, we can use the canonical prefix form:
    
    另外，我们也可以使用规范前缀形式：
  +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
  :marked
    There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
    
    在这个结构背后还有一个故事，一个关于如何构建我们以前学过的属性绑定和事件绑定技术的故事。
  
    ### Inside [(ngModel)]
    ### [(ngModel)]内幕
    We could have achieved the same result with separate bindings to
    the `<input>` element's  `value` property and `input` event.
    
    通过分别绑定到`<input>`元素的`value`属性和`input`事件，我们能达到同样的效果。
  +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
  :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.
    
    `ngModel`指令通过它自己的`ngModel`输入属性和`ngModelChange`输出属性隐藏了这些繁琐的细节。
  +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-3')(format=".")
  .l-sub-section
    :marked
  