Update input-helpers to angle bracket syntax ember-learn#692

guides/release/templates/input-helpers.md

@@ -1,12 +1,12 @@
-The [`{{input}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
-and [`{{textarea}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=textarea)
+The [`<Input />`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
+and [`<Textarea />`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=textarea)
 helpers in Ember.js are the easiest way to create common form controls.
 Using these helpers, you can create form controls that are almost identical to the native HTML `<input>` or `<textarea>` elements, but are aware of Ember's two-way bindings and can automatically update.
 
 ## Text fields
 
 ```handlebars
-{{input value="http://www.facebook.com"}}
+<Input @value="http://www.facebook.com" />
 ```
 
 Will become:
@@ -15,7 +15,7 @@ Will become:
 <input type="text" value="http://www.facebook.com"/>
 ```
 
-You can pass the following standard `<input>` attributes within the input
+You can pass any the following standard `<input>` attributes within the input
 helper:
 
 <table>
@@ -31,13 +31,13 @@ helper:
   <tr><td>`selectionDirection`</td><td>`spellcheck`</td><td>`type`</td></tr>
 </table>
 
-If these attributes are set to a quoted string, their values will be set
-directly on the element, as in the previous example. However, when left
-unquoted, these values will be bound to a property on the template's current
+If these attributes are set without the `@` symbol, their values will be set
+directly on the element. However, when including the `@` symbol, these
+values will be bound to a property on the template's current
 rendering context. For example:
 
 ```handlebars
-{{input type="text" value=this.firstName disabled=this.entryNotAllowed size="50"}}
+<Input type="text" @value={{this.firstName}} @disabled={{this.entryNotAllowed}} size="50" />
 ```
 
 Will bind the `disabled` attribute to the value of `entryNotAllowed` in the
@@ -48,7 +48,7 @@ current context.
 To dispatch an action on specific events such as `key-press`, use the following
 
 ```handlebars
-{{input value=this.firstName key-press=(action "updateFirstName")}}
+<Input @value={{this.firstName}} @key-press={{action "updateFirstName"}} />
 ```
 
 The following event types are supported (dasherized format):
@@ -67,11 +67,11 @@ More [events types](https://www.emberjs.com/api/ember/release/classes/Component)
 ## Checkboxes
 
 You can also use the
-[`{{input}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
+[`<Input />`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
 helper to create a checkbox by setting its `type`:
 
 ```handlebars
-{{input type="checkbox" name="isAdmin" checked=this.isAdmin}}
+<Input type="checkbox" @name="isAdmin" @checked={{this.isAdmin}} />
 ```
 
 Checkboxes support the following properties:
@@ -91,19 +91,19 @@ Which can be bound or set as described in the previous section.
 Checkboxes are a special input type. If you want to dispatch an action on a certain [event](https://www.emberjs.com/api/ember/release/classes/Component), you will always need to define the event name in camelCase format:
 
 ```handlebars
-{{input type="checkbox" keyPress=(action "updateName")}}
+<Input type="checkbox" @keyPress={{action "updateName"}} />
 ```
 
 
 ## Text Areas
 
 ```handlebars
-{{textarea value=this.name cols="80" rows="6"}}
+<Textarea @value={{this.name}} cols="80" rows="6" />
 ```
 
 Will bind the value of the text area to `name` on the current context.
 
-[`{{textarea}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/textarea?anchor=textarea) supports binding and/or setting the following properties:
+[`<Textarea />`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/textarea?anchor=textarea) supports binding and/or setting the following properties:
 
 * `value`
 * `name`
@@ -128,7 +128,7 @@ Will bind the value of the text area to `name` on the current context.
 You might need to bind a property dynamically to an input if you're building a flexible form, for example. To achieve this you need to use the [`{{get}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/get?anchor=get) and [`{{mut}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/mut?anchor=mut) in conjunction like shown in the following example:
 
 ```handlebars
-{{input value=(mut (get this.person this.field))}}
+<Input @value={{mut (get this.person this.field)}} />
 ```
 
 The `{{get}}` helper allows you to dynamically specify which property to bind, while the `{{mut}}` helper allows the binding to be updated from the input. See the respective helper documentation for more detail.