docs(template-syntax/dart): updates to match TS

- Propagates TS-side changes:
  - update #2639 - new two-way binding section, and
  - fix #2687 - invalid attr syntax
- Fixes
  - #1898 - currency symbols
  - #2748 - Dart template-syntax e2e is failing
  - #2749 - deprecated `[className]`

Author: chalin

public/docs/_examples/template-syntax/dart/lib/app_component.dart

@@ -8,6 +8,7 @@ import 'package:angular2/common.dart';
 import 'hero.dart';
 import 'hero_detail_component.dart';
 import 'my_click_directive.dart';
+import 'my_sizer_component.dart';
 
 enum Color { red, green, blue }
 
@@ -18,7 +19,8 @@ enum Color { red, green, blue }
       HeroDetailComponent,
       BigHeroDetailComponent,
       MyClickDirective,
-      MyClickDirective2
+      MyClickDirective2,
+      MySizerComponent
     ])
 class AppComponent implements OnInit, AfterViewInit {
   @override
@@ -165,6 +167,7 @@ class AppComponent implements OnInit, AfterViewInit {
   bool isItalic = false;
   bool isBold = false;
   String fontSize = 'large';
+  String fontSizePx = '14';
 
   Map<String, String> setStyle() {
     return {

public/docs/_examples/template-syntax/dart/lib/app_component.html

@@ -14,7 +14,7 @@ <h1>Template Syntax</h1>
 </div>
 <br>
 <a href="#event-binding">Event Binding</a><br>
-
+<a href="#two-way">Two-way Binding</a><br>
 <br>
 <div>Directives</div>
 <div style="margin-left:8px">
@@ -242,9 +242,6 @@ <h3>
 
   <button [attr.disabled]="!isUnchanged">Disabled as well</button>
 
-  <!-- can't remove it with [attr.disabled] either -->
-  <button disabled [attr.disabled]>Still disabled</button>
-
   <!-- we'd have to remove it with property binding -->
   <button disabled [disabled]="false">Enabled (but inert)</button>
 </div>
@@ -262,7 +259,7 @@ <h3>
 <!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [className]="badCurly">Bad curly</div>
+     [class]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -349,6 +346,24 @@ <h3>
 </div>
 <!-- #enddocregion event-binding-propagation -->
 <br><br>
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <!-- #docregion two-way-1 -->
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <!-- #enddocregion two-way-1 -->
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <!-- #docregion two-way-2 -->
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
+  <!-- #enddocregion two-way-2 -->
+</div>
+<br><br>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -746,7 +761,7 @@ <h4>Example Form</h4>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product['price'] | currency:'USD':false}}
+  <label>Price: </label>{{product['price'] | currency:'USD':true}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>

public/docs/_examples/template-syntax/dart/lib/my_sizer_component.dart

@@ -0,0 +1,30 @@
+// #docregion
+import 'dart:math';
+import 'package:angular2/core.dart';
+
+@Component(
+    selector: 'my-sizer',
+    template: '''
+  <div>
+    <button (click)="dec()" title="smaller">-</button>
+    <button (click)="inc()" title="bigger">+</button>
+    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+  </div>''')
+class MySizerComponent {
+  static final defaultPxSize = 14;
+
+  @Input()
+  String size;
+
+  @Output()
+  var sizeChange = new EventEmitter<String>();
+
+  void dec() => resize(-1);
+  void inc() => resize(1);
+
+  void resize(num delta) {
+    final numSize = num.parse(size, (_) => defaultPxSize);
+    size = min(40, max(8, numSize + delta)).toString();
+    sizeChange.emit(size);
+  }
+}

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

@@ -48,16 +48,6 @@ block dart-type-exception-example
       In checked mode, the code above will result in a type exception: 
       `String` isn't a subtype of `Hero`.
 
-block dart-class-binding-bug
-  .callout.is-helpful
-    header Angular Issue #6901
-    :marked
-      Issue [#6901][6901] prevents us from using `[class]`. As is illustrated
-      above, in the meantime we can achieve the same effect by binding to
-      `className`.
-      
-      [6901]: http://github.com/angular/angular/issues/6901
-
 block style-property-name-dart-diff
   .callout.is-helpful
     header Dart difference: Style property names

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

@@ -668,9 +668,6 @@ code-example(format="nocode").
   We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
-block dart-class-binding-bug
-  //- N/A
-
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
@@ -854,35 +851,43 @@ block style-property-name-dart-diff
   Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
   The `[(x)]` syntax combines the brackets 
   of _Property Binding_, `[x]`, with the parentheses of _Event Binding_, `(x)`.
+
 .callout.is-important
   header [( )] = banana in a box
   :marked
     Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
 :marked
   The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
   and a corresponding event named `xChange`. 
-  Here's a `SizerComponent` that fits the pattern.
+  Here's a `MySizerComponent` that fits the pattern.
   It has a `size` value property and a companion `sizeChange` event:
-+makeExample('template-syntax/ts/app/sizer.component.ts', null, 'app/sizer.component.ts')
+
++makeExample('app/my-sizer.component.ts')
+
 :marked
   The initial `size` is an input value from a property binding.
   Clicking the buttons increases or decreases the `size`, within min/max values constraints,
   and then raises (_emits_) the `sizeChange` event with the adjusted size.
 
-  Here's an example in which the `AppComponent.fontSize` is two-way bound to the `SizerComponent`:
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-1')(format=".")
+  Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `MySizerComponent`:
+
++makeExcerpt('app/app.component.html', 'two-way-1', '')
+
 :marked
-  The `AppComponent.fontSize` establishes the initial `SizerComponent.size` value.
-  Clicking the buttons updates the `AppComponent.fontSize` via the two-way binding.
-  The revised `AppComponent.fontSize` value flows through to the _style_ binding, making the displayed text bigger or smaller.
-  Try it in the <live-example>live example</live-example>.
+  The `AppComponent.fontSizePx` establishes the initial `MySizerComponent.size` value.
+  Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+  The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
+  Try it in the <live-example></live-example>.
 
   The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
-  Angular _desugars_ the `SizerComponent` binding into this:
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-2')(format=".")
+  Angular _desugars_ the `MySizerComponent` binding into this:
+
++makeExcerpt('app/app.component.html', 'two-way-2', '')
+
 :marked
-  The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
-  Angular assigns the `$event` value to the `AppComponent.fontSize` when the user clicks the buttons.
+  The `$event` variable contains the payload of the `MySizerComponent.sizeChange` event.
+  Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
 
   Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.